

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="https://ikkiss.oss-cn-hangzhou.aliyuncs.com/images/myblog/IKKIS_LOGO.png">
  <link rel="icon" href="https://ikkiss.oss-cn-hangzhou.aliyuncs.com/images/myblog/IKKIS_LOGO.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="Ikki">
  <meta name="keywords" content="">
  
    <meta name="description" content="formily简版源码">
<meta property="og:type" content="article">
<meta property="og:title" content="formily简版源码">
<meta property="og:url" content="http://81.68.132.127/2022/11/11/formily/formily%E7%AE%80%E7%89%88%E6%BA%90%E7%A0%81/index.html">
<meta property="og:site_name" content="IKKI">
<meta property="og:description" content="formily简版源码">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://ikkiss.oss-cn-hangzhou.aliyuncs.com/images/myblog/beijing/iTab-o3zzj7.jpeg">
<meta property="article:published_time" content="2022-11-11T14:04:05.000Z">
<meta property="article:modified_time" content="2022-11-11T14:08:07.501Z">
<meta property="article:author" content="Ikki">
<meta property="article:tag" content="组件库">
<meta property="article:tag" content="formily">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://ikkiss.oss-cn-hangzhou.aliyuncs.com/images/myblog/beijing/iTab-o3zzj7.jpeg">
  
  
    <meta name="referrer" content="no-referrer-when-downgrade">
  
  
  <title>formily简版源码 - IKKI</title>

  <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />



  <link  rel="stylesheet" href="https://lib.baomitu.com/github-markdown-css/4.0.0/github-markdown.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/hint.css/2.7.0/hint.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css" />



<!-- 主题依赖的图标库，不要自行修改 -->
<!-- Do not modify the link that theme dependent icons -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_hj8rtnfg7um.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/css/main.css" />


  <link id="highlight-css" rel="stylesheet" href="/css/highlight.css" />
  
    <link id="highlight-css-dark" rel="stylesheet" href="/css/highlight-dark.css" />
  



  
<link rel="stylesheet" href="/fluid/css/fluid-extention.css">
<link rel="stylesheet" href="/fluid/css/nihao.css">



  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    Fluid.ctx = Object.assign({}, Fluid.ctx)
    var CONFIG = {"hostname":"81.68.132.127","root":"/","version":"1.9.3","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false,"scope":[]},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"code_language":{"enable":true,"default":"TEXT"},"copy_btn":true,"image_caption":{"enable":true},"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"placement":"left","headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":3},"lazyload":{"enable":true,"loading_img":"https://ikkiss.oss-cn-hangzhou.aliyuncs.com/images/myblog/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"follow_dnt":true,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/local-search.xml"};

    if (CONFIG.web_analytics.follow_dnt) {
      var dntVal = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
      Fluid.ctx.dnt = dntVal && (dntVal.startsWith('1') || dntVal.startsWith('yes') || dntVal.startsWith('on'));
    }
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
  


  
<meta name="generator" content="Hexo 5.4.2"></head>


<body>
  

  <header>
    

<div class="header-inner" style="height: 100vh;">
  <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/">
      <strong>Ikki-BUG制造者</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
          
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

  

<div id="banner" class="banner" parallax=true
     style="background: url('http://image.ikki0603.cn') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          
            <span id="subtitle" data-typed-text="formily简版源码"></span>
          
        </div>

        
          
  <div class="mt-3">
    
    
      <span class="post-meta">
        <i class="iconfont icon-date-fill" aria-hidden="true"></i>
        <time datetime="2022-11-11 22:04" pubdate>
          2022年11月11日 晚上
        </time>
      </span>
    
  </div>

  <div class="mt-1">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-chart"></i>
        
          31k 字
        
      </span>
    

    
      <span class="post-meta mr-2">
        <i class="iconfont icon-clock-fill"></i>
        
        
        
          257 分钟
        
      </span>
    

    
    
      
        <span id="busuanzi_container_page_pv" style="display: none">
          <i class="iconfont icon-eye" aria-hidden="true"></i>
          <span id="busuanzi_value_page_pv"></span> 次
        </span>
        
      
    
  </div>


        
      </div>

      
        <div class="scroll-down-bar">
          <i class="iconfont icon-arrowdown"></i>
        </div>
      
    </div>
  </div>
</div>

</div>

  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar" style="padding-left: 2rem; margin-right: -1rem">
    <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>



  </aside>


    </div>

    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">formily简版源码</h1>
            
              <p class="note note-info">
                
                  
                    本文最后更新于：2022年11月11日 晚上
                  
                
              </p>
            
            
              <div class="markdown-body">
                
                <h2 id="1-formily"><a href="#1-formily" class="headerlink" title="1.formily "></a>1.formily </h2><ul>
<li>  <a target="_blank" rel="noopener" href="https://formilyjs.org/zh-CN/guide">formilyjs</a></li>
<li>  <a target="_blank" rel="noopener" href="https://github.com/alibaba/formily">formily</a></li>
<li>内容大纲<ul>
<li>  实现<code>@formily/reactive</code>核心</li>
<li>  实现<code>@formily/reactive-react</code>核心</li>
<li>  实现<code>@formily/core</code>核心</li>
<li>  实现<code>@formily/react</code>核心</li>
<li>  实现<code>@formily/antd</code>核心</li>
</ul>
</li>
</ul>
<p><img src="https://static.zhufengpeixun.com/formily_1659867545884.svg" srcset="https://ikkiss.oss-cn-hangzhou.aliyuncs.com/images/myblog/loading.gif" lazyload></p>
<h3 id="1-1-安装"><a href="#1-1-安装" class="headerlink" title="1.1 安装"></a>1.1 安装</h3><figure class="highlight sql"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-duptn8lacl5vp0"></i><span>sql</span><div class="collapse show" id="collapse-duptn8lacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs sql">pnpm <span class="hljs-keyword">create</span> vite<br>pnpm install <span class="hljs-variable">@formily</span><span class="hljs-operator">/</span>reactive <span class="hljs-variable">@formily</span><span class="hljs-operator">/</span>reactive<span class="hljs-operator">-</span>react <span class="hljs-variable">@formily</span><span class="hljs-operator">/</span>core <span class="hljs-variable">@formily</span><span class="hljs-operator">/</span>react <span class="hljs-variable">@formily</span><span class="hljs-operator">/</span>antd antd moment less <span class="hljs-comment">--save</span><br><br></code></pre></td></tr></table></div></figure>

<h3 id="1-2-vite-config-ts"><a href="#1-2-vite-config-ts" class="headerlink" title="1.2 vite.config.ts"></a>1.2 vite.config.ts</h3><p>vite.config.ts</p>
<figure class="highlight php"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-7ehtg0lacl5vp0"></i><span>php</span><div class="collapse show" id="collapse-7ehtg0lacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs php">import &#123; defineConfig &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vite&#x27;</span><br>import react <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@vitejs/plugin-react&#x27;</span><br>import path <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;path&#x27;</span><br>export <span class="hljs-keyword">default</span> <span class="hljs-title function_ invoke__">defineConfig</span>(&#123;<br>  <span class="hljs-attr">plugins</span>: [<span class="hljs-title function_ invoke__">react</span>()],<br>  <span class="hljs-attr">resolve</span>: &#123;<br>    <span class="hljs-attr">alias</span>: [<br>      &#123; <span class="hljs-attr">find</span>: /^~/, <span class="hljs-attr">replacement</span>: <span class="hljs-string">&#x27;&#x27;</span> &#125;,<br>      &#123; <span class="hljs-attr">find</span>: <span class="hljs-string">&quot;@&quot;</span>, <span class="hljs-attr">replacement</span>: path.<span class="hljs-title function_ invoke__">resolve</span>(<span class="hljs-string">&#x27;src&#x27;</span>) &#125;<br>    ]<br>  &#125;,<br>  <span class="hljs-attr">css</span>: &#123;<br>    <span class="hljs-attr">preprocessorOptions</span>: &#123;<br>      <span class="hljs-attr">less</span>: &#123;<br>        <span class="hljs-attr">javascriptEnabled</span>: <span class="hljs-literal">true</span>,<br>      &#125;<br>    &#125;<br>  &#125;<br>&#125;)<br><br></code></pre></td></tr></table></div></figure>

<h2 id="2-formily-reactive"><a href="#2-formily-reactive" class="headerlink" title="2. @formily/reactive "></a>2. @formily/reactive </h2><ul>
<li>  依赖<a target="_blank" rel="noopener" href="https://reactive.formilyjs.org/zh-CN">@formily/reactive</a>响应式解决方案，构建响应式表单的领域模型实现精确渲染</li>
</ul>
<p><img src="https://static.zhufengpeixun.com/Reaction_1655437930177.png" srcset="https://ikkiss.oss-cn-hangzhou.aliyuncs.com/images/myblog/loading.gif" lazyload></p>
<h3 id="2-1-observable"><a href="#2-1-observable" class="headerlink" title="2.1 observable"></a>2.1 observable</h3><ul>
<li>  <a href="hhttps://reactive.formilyjs.org/zh-CN/guide/concept#observable">observable</a>主要用于创建不同响应式行为的 <code>observable</code> 对象</li>
<li>  一个<code>observable</code>对象，字面意思是可订阅对象，我们通过创建一个可订阅对象，在每次操作该对象的属性数据的过程中，会自动通知订阅者</li>
<li>  <a target="_blank" rel="noopener" href="https://reactive.formilyjs.org/zh-CN">@formily/reactive</a> 创建 <a target="_blank" rel="noopener" href="https://reactive.formilyjs.org/zh-CN/api/observable">observable</a> 对象主要是通过 <code>ES Proxy</code> 来创建的，它可以做到完美劫持数据操作</li>
</ul>
<h3 id="2-2-Reaction"><a href="#2-2-Reaction" class="headerlink" title="2.2 Reaction"></a>2.2 Reaction</h3><ul>
<li>  <a target="_blank" rel="noopener" href="https://reactive.formilyjs.org/zh-CN/guide/concept#reaction">reaction</a>在响应式编程模型中，它就相当于是可订阅对象的订阅者</li>
<li>  它接收一个 <code>tracker</code> 函数，这个函数在执行的时候，如果函数内部有对 <code>observable</code> 对象中的某个属性进行读操作会进行依赖收集，那当前 <code>reaction</code> 就会与该属性进行一个绑定(依赖追踪)，该属性在其它地方发生了写操作，就会触发 <code>tracker</code> 函数重复执行</li>
<li>  从订阅到派发订阅，其实是一个封闭的循环状态机，每次 <code>tracker</code> 函数执行的时候都会重新收集依赖，依赖变化时又会重新触发<code>tracker</code>执行</li>
</ul>
<p><img src="https://static.zhufengpeixun.com/reaction_1659865173726.png" srcset="https://ikkiss.oss-cn-hangzhou.aliyuncs.com/images/myblog/loading.gif" lazyload></p>
<h3 id="2-3-autorun"><a href="#2-3-autorun" class="headerlink" title="2.3 autorun"></a>2.3 autorun</h3><ul>
<li>  <a target="_blank" rel="noopener" href="https://reactive.formilyjs.org/zh-CN/api/autorun">autorun</a>可以创建一个自动执行的响应器</li>
<li>  接收一个 <code>tracker</code> 函数，如果函数内部有消费 <code>observable</code> 数据，数据发生变化时，<code>tracker</code> 函数会重复执行</li>
</ul>
<h3 id="2-4-创建深度可观察对象"><a href="#2-4-创建深度可观察对象" class="headerlink" title="2.4 创建深度可观察对象"></a>2.4 创建深度可观察对象</h3><ul>
<li>  <a target="_blank" rel="noopener" href="https://reactive.formilyjs.org/zh-CN/api/observable">observable</a>主要用于创建不同响应式行为的 observable 对象，同时可以作为 annotation 给 define 用于标记响应式属性</li>
<li>  <a target="_blank" rel="noopener" href="https://reactive.formilyjs.org/zh-CN/api/autorun">autorun</a>接收一个 tracker 函数，如果函数内部有消费 observable 数据，数据发生变化时，tracker 函数会重复执行</li>
<li>  <a target="_blank" rel="noopener" href="https://reactive.formilyjs.org/zh-CN/api/reaction">reaction</a>接收一个 tracker 函数，与 callback 响应函数，如果 tracker 内部有消费 observable 数据，数据发生变化时，tracker 函数会重复执行，但是 callback 执行必须要求 tracker 函数返回值发生变化时才执行</li>
<li>  <a target="_blank" rel="noopener" href="https://reactive.formilyjs.org/zh-CN/api/define">define</a>手动定义领域模型，可以指定具体属性的响应式行为，也可以指定某个方法为 batch 模式</li>
<li>  <a target="_blank" rel="noopener" href="https://reactive.formilyjs.org/zh-CN/api/to-js">toJS</a>深度递归将 observable 对象转换成普通 JS 对象</li>
<li>  <a target="_blank" rel="noopener" href="https://reactive.formilyjs.org/zh-CN/api/tracker">tracker</a>主要用于接入 React/Vue 的手动追踪依赖工具，在依赖发生变化时不会重复执行 tracker 函数，需要用户手动重复执行，只会触发 scheduler</li>
</ul>
<h4 id="2-4-1-src-main-jsx"><a href="#2-4-1-src-main-jsx" class="headerlink" title="2.4.1 src\main.jsx"></a>2.4.1 src\main.jsx</h4><p>src\main.jsx</p>
<figure class="highlight pgsql"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-9zvo9clacl5vp0"></i><span>pgsql</span><div class="collapse show" id="collapse-9zvo9clacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs pgsql"><span class="hljs-keyword">import</span> &#123; observable, autorun &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@/@formily/reactive&#x27;</span><br>const <span class="hljs-keyword">values</span> = &#123; username: <span class="hljs-string">&#x27;zhufeng&#x27;</span>, home: &#123; <span class="hljs-type">name</span>: <span class="hljs-string">&#x27;beijing&#x27;</span> &#125; &#125;<br>const observableValues = observable(<span class="hljs-keyword">values</span>)<br>console.log(observableValues);<br>console.log(observableValues.username);<br>console.log(observableValues.home);<br>console.log(observableValues.home);<br><span class="hljs-comment">/* autorun(() =&gt; &#123;</span><br><span class="hljs-comment">  console.log(observableValues.username);</span><br><span class="hljs-comment">&#125;)</span><br><span class="hljs-comment">observableValues.username = &#x27;jiagou&#x27;; */</span><br><br></code></pre></td></tr></table></div></figure>

<p><img src="https://static.zhufengpeixun.com/observeral_1659868285710.png" srcset="https://ikkiss.oss-cn-hangzhou.aliyuncs.com/images/myblog/loading.gif" lazyload></p>
<h4 id="2-4-2-reactive-index-jsx"><a href="#2-4-2-reactive-index-jsx" class="headerlink" title="2.4.2 reactive\index.jsx"></a>2.4.2 reactive\index.jsx</h4><p>src\@formily\reactive\index.jsx</p>
<figure class="highlight routeros"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-i7pwvglacl5vp0"></i><span>routeros</span><div class="collapse show" id="collapse-i7pwvglacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs routeros"><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./observable&#x27;</span><br><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./autorun&#x27;</span><br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-4-3-observable-jsx"><a href="#2-4-3-observable-jsx" class="headerlink" title="2.4.3 observable.jsx"></a>2.4.3 observable.jsx</h4><p>src\@formily\reactive\observable.jsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-gl2jamlacl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-gl2jamlacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> &#123; createObservable &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./internals&#x27;</span>;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">observable</span>(<span class="hljs-params">target</span>) &#123;<br>    <span class="hljs-keyword">return</span> <span class="hljs-title function_">createObservable</span>(<span class="hljs-literal">null</span>, <span class="hljs-literal">null</span>, target)<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-4-4-handlers-jsx"><a href="#2-4-4-handlers-jsx" class="headerlink" title="2.4.4 handlers.jsx"></a>2.4.4 handlers.jsx</h4><p>src\@formily\reactive\handlers.jsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-rim51xlacl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-rim51xlacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> &#123; isObservable &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./externals&#x27;</span><br><span class="hljs-keyword">import</span> &#123; createObservable &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./internals&#x27;</span><br><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">RawProxy</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./environment&#x27;</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> baseHandlers = &#123;<br>    <span class="hljs-title function_">get</span>(<span class="hljs-params">target, key</span>) &#123;<br>        <span class="hljs-keyword">const</span> result = target[key]<br>        <span class="hljs-keyword">const</span> observableResult = <span class="hljs-title class_">RawProxy</span>.<span class="hljs-title function_">get</span>(result)<br>        <span class="hljs-keyword">if</span> (observableResult) &#123;<br>            <span class="hljs-keyword">return</span> observableResult<br>        &#125;<br>        <span class="hljs-keyword">if</span> (!<span class="hljs-title function_">isObservable</span>(result)) &#123;<br>            <span class="hljs-keyword">return</span> <span class="hljs-title function_">createObservable</span>(target, key, result)<br>        &#125;<br>        <span class="hljs-keyword">return</span> result;<br>    &#125;,<br>    <span class="hljs-title function_">set</span>(<span class="hljs-params">target, key, value</span>) &#123;<br>        <span class="hljs-keyword">const</span> newValue = <span class="hljs-title function_">createObservable</span>(target, key, value)<br>        target[key] = newValue<br>        <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br>    &#125;<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-4-5-environment-jsx"><a href="#2-4-5-environment-jsx" class="headerlink" title="2.4.5 environment.jsx"></a>2.4.5 environment.jsx</h4><p>src\@formily\reactive\environment.jsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-xt8kbqlacl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-xt8kbqlacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//RawProxy.set(target, proxy) 普通对象=&gt;代理对象</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title class_">RawProxy</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">WeakMap</span>()<br><span class="hljs-comment">//ProxyRaw.set(proxy, target) 代理对象=&gt;原生对象</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title class_">ProxyRaw</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">WeakMap</span>()<br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-4-6-checkers-jsx"><a href="#2-4-6-checkers-jsx" class="headerlink" title="2.4.6 checkers.jsx"></a>2.4.6 checkers.jsx</h4><p>src\@formily\reactive\checkers.jsx</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-2rnrp9lacl5vp0"></i><span>coffeescript</span><div class="collapse show" id="collapse-2rnrp9lacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript">const toString = <span class="hljs-built_in">Object</span>.prototype.toString<br><span class="hljs-keyword">export</span> const isPlainObj = <span class="hljs-function"><span class="hljs-params">(val)</span> =&gt;</span> toString.call(val) === <span class="hljs-string">&#x27;[object Object]&#x27;</span><br><span class="hljs-keyword">export</span> const isNormalType = <span class="hljs-function"><span class="hljs-params">(target)</span> =&gt;</span> &#123;<br>    <span class="hljs-keyword">return</span> isPlainObj(target)<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-4-7-internals-jsx"><a href="#2-4-7-internals-jsx" class="headerlink" title="2.4.7 internals.jsx"></a>2.4.7 internals.jsx</h4><p>src\@formily\reactive\internals.jsx</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-njz7rmlacl5vp0"></i><span>coffeescript</span><div class="collapse show" id="collapse-njz7rmlacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">import</span> &#123; baseHandlers &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./handlers&#x27;</span><br><span class="hljs-keyword">import</span> &#123; isNormalType &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./checkers&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123; ProxyRaw, RawProxy &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./environment&#x27;</span>;<br><span class="hljs-keyword">export</span> const createObservable = <span class="hljs-function"><span class="hljs-params">(target, key, value)</span> =&gt;</span> &#123;<br>    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> value !== <span class="hljs-string">&#x27;object&#x27;</span>) <span class="hljs-keyword">return</span> value;<br>    const raw = ProxyRaw.get(value)<br>    <span class="hljs-keyword">if</span> (raw) &#123;<br>        <span class="hljs-keyword">return</span> value<br>    &#125;<br>    <span class="hljs-keyword">if</span> (isNormalType(value)) <span class="hljs-keyword">return</span> createNormalProxy(value)<br>    <span class="hljs-keyword">return</span> value<br>&#125;<br>const createNormalProxy = <span class="hljs-function"><span class="hljs-params">(target)</span> =&gt;</span> &#123;<br>    const proxy = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Proxy</span>(target, baseHandlers)<br>    ProxyRaw.set(proxy, target)<br>    RawProxy.set(target, proxy)<br>    <span class="hljs-keyword">return</span> proxy<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-4-8-externals-jsx"><a href="#2-4-8-externals-jsx" class="headerlink" title="2.4.8 externals.jsx"></a>2.4.8 externals.jsx</h4><p>src\@formily\reactive\externals.jsx</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-rm3lsilacl5vp0"></i><span>coffeescript</span><div class="collapse show" id="collapse-rm3lsilacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">import</span> &#123; ProxyRaw &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./environment&#x27;</span><br><span class="hljs-keyword">export</span> const isObservable = <span class="hljs-function"><span class="hljs-params">(target)</span> =&gt;</span> &#123;<br>    <span class="hljs-keyword">return</span> ProxyRaw.has(target)<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-4-9-autorun-jsx"><a href="#2-4-9-autorun-jsx" class="headerlink" title="2.4.9 autorun.jsx"></a>2.4.9 autorun.jsx</h4><p>src\@formily\reactive\autorun.jsx</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-hvcem8lacl5vp0"></i><span>coffeescript</span><div class="collapse show" id="collapse-hvcem8lacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">export</span> const autorun = <span class="hljs-function"><span class="hljs-params">(tracker)</span> =&gt;</span> &#123;&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="2-5-实现autorun"><a href="#2-5-实现autorun" class="headerlink" title="2.5 实现autorun"></a>2.5 实现autorun</h3><h4 id="2-5-1-src-main-jsx"><a href="#2-5-1-src-main-jsx" class="headerlink" title="2.5.1 src\main.jsx"></a>2.5.1 src\main.jsx</h4><p>src\main.jsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-wkv7vwlacl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-wkv7vwlacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> &#123; observable, autorun &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@/@formily/reactive&#x27;</span><br><span class="hljs-keyword">const</span> values = &#123; <span class="hljs-attr">username</span>: <span class="hljs-string">&#x27;zhufeng&#x27;</span>, <span class="hljs-attr">home</span>: &#123; <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;beijing&#x27;</span> &#125; &#125;<br><span class="hljs-keyword">const</span> observableValues = <span class="hljs-title function_">observable</span>(values)<br>+<span class="hljs-title function_">autorun</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>+  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(observableValues.<span class="hljs-property">username</span>);<br>+&#125;)<br>+observableValues.<span class="hljs-property">username</span> = <span class="hljs-string">&#x27;jiagou&#x27;</span>;<br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-5-2-autorun-jsx"><a href="#2-5-2-autorun-jsx" class="headerlink" title="2.5.2 autorun.jsx"></a>2.5.2 autorun.jsx</h4><p>src\@formily\reactive\autorun.jsx</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-iuutxelacl5vp0"></i><span>coffeescript</span><div class="collapse show" id="collapse-iuutxelacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">import</span> &#123; ReactionStack &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./environment&#x27;</span><br><span class="hljs-keyword">export</span> const autorun = <span class="hljs-function"><span class="hljs-params">(tracker)</span> =&gt;</span> &#123;<br>    const reaction = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> &#123;<br>        ReactionStack.push(reaction)<br>        tracker()<br>        ReactionStack.pop()<br>    &#125;<br>    reaction()<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-5-3-environment-jsx"><a href="#2-5-3-environment-jsx" class="headerlink" title="2.5.3 environment.jsx"></a>2.5.3 environment.jsx</h4><p>src\@formily\reactive\environment.jsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-oejjy8lacl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-oejjy8lacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//RawProxy.set(target, proxy) 普通对象=&gt;代理对象</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title class_">RawProxy</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">WeakMap</span>()<br><span class="hljs-comment">//ProxyRaw.set(proxy, target) 代理对象=&gt;原生对象</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title class_">ProxyRaw</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">WeakMap</span>()<br>+<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title class_">RawReactionsMap</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">WeakMap</span>()<br>+<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title class_">ReactionStack</span> = []<br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-5-4-handlers-jsx"><a href="#2-5-4-handlers-jsx" class="headerlink" title="2.5.4 handlers.jsx"></a>2.5.4 handlers.jsx</h4><p>src\@formily\reactive\handlers.jsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-4iuxnylacl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-4iuxnylacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> &#123; isObservable &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./externals&#x27;</span><br><span class="hljs-keyword">import</span> &#123; createObservable &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./internals&#x27;</span><br><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">RawProxy</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./environment&#x27;</span><br>+<span class="hljs-keyword">import</span> &#123; bindTargetKeyWithCurrentReaction, runReactionsFromTargetKey &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./reaction&#x27;</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> baseHandlers = &#123;<br>    <span class="hljs-title function_">get</span>(<span class="hljs-params">target, key</span>) &#123;<br>        <span class="hljs-keyword">const</span> result = target[key]<br>+       <span class="hljs-title function_">bindTargetKeyWithCurrentReaction</span>(&#123; target, key &#125;)<br>        <span class="hljs-keyword">const</span> observableResult = <span class="hljs-title class_">RawProxy</span>.<span class="hljs-title function_">get</span>(result)<br>        <span class="hljs-keyword">if</span> (observableResult) &#123;<br>            <span class="hljs-keyword">return</span> observableResult<br>        &#125;<br>        <span class="hljs-keyword">if</span> (!<span class="hljs-title function_">isObservable</span>(result)) &#123;<br>            <span class="hljs-keyword">return</span> <span class="hljs-title function_">createObservable</span>(target, key, result)<br>        &#125;<br>        <span class="hljs-keyword">return</span> result;<br>    &#125;,<br>    <span class="hljs-title function_">set</span>(<span class="hljs-params">target, key, value</span>) &#123;<br>        <span class="hljs-keyword">const</span> newValue = <span class="hljs-title function_">createObservable</span>(target, key, value)<br>        target[key] = newValue<br>+       <span class="hljs-title function_">runReactionsFromTargetKey</span>(&#123; target, key &#125;)<br>        <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br>    &#125;<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-5-5-reaction-jsx"><a href="#2-5-5-reaction-jsx" class="headerlink" title="2.5.5 reaction.jsx"></a>2.5.5 reaction.jsx</h4><p>src\@formily\reactive\reaction.jsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-b08wcxlacl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-b08wcxlacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> &#123; isFn &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./checkers&#x27;</span><br><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">ReactionStack</span>, <span class="hljs-title class_">RawReactionsMap</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./environment&#x27;</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">addRawReactionsMap</span> = (<span class="hljs-params">target, key, reaction</span>) =&gt; &#123;<br>    <span class="hljs-keyword">const</span> reactionsMap = <span class="hljs-title class_">RawReactionsMap</span>.<span class="hljs-title function_">get</span>(target)<br>    <span class="hljs-keyword">if</span> (reactionsMap) &#123;<br>        <span class="hljs-keyword">const</span> reactionSet = reactionsMap.<span class="hljs-title function_">get</span>(key)<br>        <span class="hljs-keyword">if</span> (reactionSet) &#123;<br>            reactionSet.<span class="hljs-title function_">add</span>(reaction)<br>        &#125; <span class="hljs-keyword">else</span> &#123;<br>            <span class="hljs-keyword">let</span> reactionSet = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Set</span>();<br>            reactionSet.<span class="hljs-title function_">add</span>(reaction);<br>            reactionsMap.<span class="hljs-title function_">set</span>(key, reactionSet);<br>        &#125;<br>        <span class="hljs-keyword">return</span> reactionsMap<br>    &#125; <span class="hljs-keyword">else</span> &#123;<br>        <span class="hljs-keyword">let</span> reactionSet = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Set</span>();<br>        reactionSet.<span class="hljs-title function_">add</span>(reaction);<br>        <span class="hljs-keyword">const</span> reactionsMap = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Map</span>([[key, reactionSet]])<br>        <span class="hljs-title class_">RawReactionsMap</span>.<span class="hljs-title function_">set</span>(target, reactionsMap)<br>        <span class="hljs-keyword">return</span> reactionsMap<br>    &#125;<br>&#125;<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title function_">bindTargetKeyWithCurrentReaction</span> = (<span class="hljs-params">operation</span>) =&gt; &#123;<br>    <span class="hljs-keyword">let</span> &#123; key, target &#125; = operation<br>    <span class="hljs-keyword">const</span> current = <span class="hljs-title class_">ReactionStack</span>[<span class="hljs-title class_">ReactionStack</span>.<span class="hljs-property">length</span> - <span class="hljs-number">1</span>]<br>    <span class="hljs-keyword">if</span> (current) &#123;<br>       <span class="hljs-title function_">addRawReactionsMap</span>(target, key, current)<br>    &#125;<br>&#125;<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title function_">runReactionsFromTargetKey</span> = (<span class="hljs-params">operation</span>) =&gt; &#123;<br>    <span class="hljs-keyword">let</span> &#123; key, target &#125; = operation<br>    <span class="hljs-title function_">runReactions</span>(target, key)<br>&#125;<br><span class="hljs-keyword">const</span> <span class="hljs-title function_">runReactions</span> = (<span class="hljs-params">target, key</span>) =&gt; &#123;<br>    <span class="hljs-keyword">const</span> reactions = <span class="hljs-title function_">getReactionsFromTargetKey</span>(target, key)<br>    <span class="hljs-keyword">if</span>(reactions)&#123;<br>        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> reaction <span class="hljs-keyword">of</span> reactions) &#123;<br>            <span class="hljs-title function_">reaction</span>();<br>        &#125;<br>    &#125;<br>&#125;<br><span class="hljs-keyword">const</span> <span class="hljs-title function_">getReactionsFromTargetKey</span> = (<span class="hljs-params">target, key</span>) =&gt; &#123;<br>    <span class="hljs-keyword">const</span> reactionsMap = <span class="hljs-title class_">RawReactionsMap</span>.<span class="hljs-title function_">get</span>(target);<br>    <span class="hljs-keyword">if</span> (reactionsMap) &#123;<br>        <span class="hljs-keyword">return</span> reactionsMap.<span class="hljs-title function_">get</span>(key)<br>    &#125;<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-5-6-checkers-jsx"><a href="#2-5-6-checkers-jsx" class="headerlink" title="2.5.6 checkers.jsx"></a>2.5.6 checkers.jsx</h4><p>src\@formily\reactive\checkers.jsx</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-slhqkflacl5vp0"></i><span>coffeescript</span><div class="collapse show" id="collapse-slhqkflacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript">const toString = <span class="hljs-built_in">Object</span>.prototype.toString<br><span class="hljs-keyword">export</span> const isPlainObj = <span class="hljs-function"><span class="hljs-params">(val)</span> =&gt;</span> toString.call(val) === <span class="hljs-string">&#x27;[object Object]&#x27;</span><br><span class="hljs-keyword">export</span> const isNormalType = <span class="hljs-function"><span class="hljs-params">(target)</span> =&gt;</span> &#123;<br>    <span class="hljs-keyword">return</span> isPlainObj(target)<br>&#125;<br>+<span class="hljs-keyword">export</span> const isFn = <span class="hljs-function"><span class="hljs-params">(val)</span> =&gt;</span> <span class="hljs-keyword">typeof</span> val === <span class="hljs-string">&#x27;function&#x27;</span><br><br></code></pre></td></tr></table></div></figure>

<h3 id="2-6-实现define"><a href="#2-6-实现define" class="headerlink" title="2.6 实现define"></a>2.6 实现define</h3><p><img src="https://static.zhufengpeixun.com/define_1659861859271.png" srcset="https://ikkiss.oss-cn-hangzhou.aliyuncs.com/images/myblog/loading.gif" lazyload></p>
<h4 id="2-6-1-src-main-jsx"><a href="#2-6-1-src-main-jsx" class="headerlink" title="2.6.1 src\main.jsx"></a>2.6.1 src\main.jsx</h4><p>src\main.jsx</p>
<figure class="highlight pgsql"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-po2zljlacl5vp0"></i><span>pgsql</span><div class="collapse show" id="collapse-po2zljlacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs pgsql">+<span class="hljs-keyword">import</span> &#123; observable, autorun, define &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@/@formily/reactive&#x27;</span><br>+const form = &#123;<br>+  <span class="hljs-keyword">values</span>: &#123; username: &#123; <span class="hljs-keyword">value</span>: <span class="hljs-string">&#x27;zhufeng&#x27;</span> &#125; &#125;,<br>+  fields: &#123; username: &#123; <span class="hljs-type">name</span>: <span class="hljs-string">&#x27;用户名&#x27;</span> &#125; &#125;<br>+&#125;<br>+define(form, &#123;<br>+  <span class="hljs-keyword">values</span>: observable,<br>+  fields: observable.shallow<br>+&#125;);<br>autorun(() =&gt; &#123;<br>+ console.log(form.<span class="hljs-keyword">values</span>, form.<span class="hljs-keyword">values</span>.username, form.<span class="hljs-keyword">values</span>.username.<span class="hljs-keyword">value</span>);<br>+ console.log(form.fields, form.fields.username, form.fields.username.name);<br>&#125;)<br>+form.<span class="hljs-keyword">values</span>.username.<span class="hljs-keyword">value</span> = <span class="hljs-string">&#x27;jiagou&#x27;</span><br>+form.fields.username.name = <span class="hljs-string">&#x27;密码&#x27;</span><br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-6-2-reactive-index-jsx"><a href="#2-6-2-reactive-index-jsx" class="headerlink" title="2.6.2 reactive\index.jsx"></a>2.6.2 reactive\index.jsx</h4><p>src\@formily\reactive\index.jsx</p>
<figure class="highlight routeros"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-df0q9rlacl5vp0"></i><span>routeros</span><div class="collapse show" id="collapse-df0q9rlacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs routeros"><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./observable&#x27;</span><br><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./autorun&#x27;</span><br>+<span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./model&#x27;</span><br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-6-3-model-jsx"><a href="#2-6-3-model-jsx" class="headerlink" title="2.6.3 model.jsx"></a>2.6.3 model.jsx</h4><p>src\@formily\reactive\model.jsx</p>
<figure class="highlight aspectj"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-vg9vx4lacl5vp0"></i><span>aspectj</span><div class="collapse show" id="collapse-vg9vx4lacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs aspectj"><span class="hljs-keyword">import</span> &#123; getObservableMaker &#125; from <span class="hljs-string">&#x27;./internals&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123; isObservable, isAnnotation &#125; from <span class="hljs-string">&#x27;./externals&#x27;</span><br>export <span class="hljs-function">function <span class="hljs-title">define</span><span class="hljs-params">(<span class="hljs-keyword">target</span>, annotations)</span> </span>&#123;<br>    <span class="hljs-keyword">if</span> (isObservable(<span class="hljs-keyword">target</span>)) <span class="hljs-keyword">return</span> <span class="hljs-keyword">target</span><br>    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">const</span> key in annotations) &#123;<br>        <span class="hljs-keyword">const</span> annotation = annotations[key]<br>        <span class="hljs-keyword">if</span> (isAnnotation(annotation)) &#123;<br>            getObservableMaker(annotation)(&#123; <span class="hljs-keyword">target</span>, key &#125;)<br>        &#125;<br>    &#125;<br>    <span class="hljs-keyword">return</span> <span class="hljs-keyword">target</span><br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-6-4-internals-jsx"><a href="#2-6-4-internals-jsx" class="headerlink" title="2.6.4 internals.jsx"></a>2.6.4 internals.jsx</h4><p>src\@formily\reactive\internals.jsx</p>
<figure class="highlight kotlin"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-wip0pwlacl5vp0"></i><span>kotlin</span><div class="collapse show" id="collapse-wip0pwlacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><code class="hljs kotlin"><span class="hljs-keyword">import</span> &#123; baseHandlers &#125; from <span class="hljs-string">&#x27;./handlers&#x27;</span><br>+<span class="hljs-keyword">import</span> &#123; isNormalType, isFn &#125; from <span class="hljs-string">&#x27;./checkers&#x27;</span>;<br>+<span class="hljs-keyword">import</span> &#123; ProxyRaw, RawProxy, MakeObservableSymbol, RawShallowProxy &#125; from <span class="hljs-string">&#x27;./environment&#x27;</span>;<br>+export <span class="hljs-keyword">const</span> createObservable = (target, key, value, shallow) =&gt; &#123;<br>    <span class="hljs-keyword">if</span> (typeof value !== <span class="hljs-string">&#x27;object&#x27;</span>) <span class="hljs-keyword">return</span> value;<br>    <span class="hljs-keyword">const</span> raw = ProxyRaw.<span class="hljs-keyword">get</span>(value)<br>    <span class="hljs-keyword">if</span> (raw) &#123;<br>        <span class="hljs-keyword">return</span> value<br>    &#125;<br>+   <span class="hljs-keyword">if</span> (target) &#123;<br>+       <span class="hljs-keyword">const</span> parentRaw = ProxyRaw.<span class="hljs-keyword">get</span>(target) || target<br>+       <span class="hljs-keyword">const</span> isShallowParent = RawShallowProxy.<span class="hljs-keyword">get</span>(parentRaw)<br>+       <span class="hljs-keyword">if</span> (isShallowParent) <span class="hljs-keyword">return</span> value<br>+   &#125;<br>+   <span class="hljs-keyword">if</span> (shallow) <span class="hljs-keyword">return</span> createShallowProxy(value)<br>    <span class="hljs-keyword">if</span> (isNormalType(value)) <span class="hljs-keyword">return</span> createNormalProxy(value)<br>    <span class="hljs-keyword">return</span> value<br>&#125;<br>+<span class="hljs-keyword">const</span> createShallowProxy = (target) =&gt; &#123;<br>+    <span class="hljs-keyword">if</span> (isNormalType(target)) <span class="hljs-keyword">return</span> createNormalProxy(target, <span class="hljs-literal">true</span>)<br>+    <span class="hljs-keyword">return</span> target<br>+&#125;<br>+<span class="hljs-keyword">const</span> createNormalProxy = (target, shallow) =&gt; &#123;<br>    <span class="hljs-keyword">const</span> proxy = new Proxy(target, baseHandlers)<br>    ProxyRaw.<span class="hljs-keyword">set</span>(proxy, target)<br>+   <span class="hljs-keyword">if</span> (shallow) &#123;<br>+       RawShallowProxy.<span class="hljs-keyword">set</span>(target, proxy)<br>+   &#125; <span class="hljs-keyword">else</span> &#123;<br>+       RawProxy.<span class="hljs-keyword">set</span>(target, proxy)<br>+   &#125;<br>    <span class="hljs-keyword">return</span> proxy<br>&#125;<br>+export <span class="hljs-keyword">const</span> createAnnotation = (maker) =&gt; &#123;<br>+    <span class="hljs-keyword">const</span> <span class="hljs-keyword">annotation</span> = (target) =&gt; &#123;<br>+        <span class="hljs-keyword">return</span> maker(&#123; value: target &#125;)<br>+    &#125;<br>+    <span class="hljs-keyword">if</span> (isFn(maker)) &#123;<br>+        <span class="hljs-keyword">annotation</span>[MakeObservableSymbol] = maker<br>+    &#125;<br>+    <span class="hljs-keyword">return</span> <span class="hljs-keyword">annotation</span><br>+&#125;<br>+export <span class="hljs-keyword">const</span> getObservableMaker = (target) =&gt; &#123;<br>+    <span class="hljs-keyword">if</span> (target[MakeObservableSymbol]) &#123;<br>+        <span class="hljs-keyword">if</span> (!target[MakeObservableSymbol][MakeObservableSymbol]) &#123;<br>+            <span class="hljs-keyword">return</span> target[MakeObservableSymbol]<br>+        &#125;<br>+        <span class="hljs-keyword">return</span> getObservableMaker(target[MakeObservableSymbol])<br>+    &#125;<br>+&#125;<br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-6-5-externals-jsx"><a href="#2-6-5-externals-jsx" class="headerlink" title="2.6.5 externals.jsx"></a>2.6.5 externals.jsx</h4><p>src\@formily\reactive\externals.jsx</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-29lmb5lacl5vp0"></i><span>coffeescript</span><div class="collapse show" id="collapse-29lmb5lacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript">+<span class="hljs-keyword">import</span> &#123; ProxyRaw, MakeObservableSymbol &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./environment&#x27;</span><br><span class="hljs-keyword">export</span> const isObservable = <span class="hljs-function"><span class="hljs-params">(target)</span> =&gt;</span> &#123;<br>    <span class="hljs-keyword">return</span> ProxyRaw.has(target)<br>&#125;<br>+<span class="hljs-keyword">export</span> const isAnnotation = <span class="hljs-function"><span class="hljs-params">(target)</span> =&gt;</span> &#123;<br>+    <span class="hljs-keyword">return</span> target &amp;&amp; target[MakeObservableSymbol]<br>+&#125;<br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-6-6-environment-jsx"><a href="#2-6-6-environment-jsx" class="headerlink" title="2.6.6 environment.jsx"></a>2.6.6 environment.jsx</h4><p>src\@formily\reactive\environment.jsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-sd8feylacl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-sd8feylacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//RawProxy.set(target, proxy) 普通对象=&gt;代理对象</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title class_">RawProxy</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">WeakMap</span>()<br><span class="hljs-comment">//ProxyRaw.set(proxy, target) 代理对象=&gt;原生对象</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title class_">ProxyRaw</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">WeakMap</span>()<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title class_">RawReactionsMap</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">WeakMap</span>()<br>+<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title class_">ReactionStack</span> = []<br>+<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title class_">MakeObservableSymbol</span> = <span class="hljs-title class_">Symbol</span>(<span class="hljs-string">&#x27;MakeObservableSymbol&#x27;</span>)<br>+<span class="hljs-comment">//RawShallowProxy.set(target, proxy) 原生对象=&gt;代理对象</span><br>+<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title class_">RawShallowProxy</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">WeakMap</span>()<br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-6-7-observable-jsx"><a href="#2-6-7-observable-jsx" class="headerlink" title="2.6.7 observable.jsx"></a>2.6.7 observable.jsx</h4><p>src\@formily\reactive\observable.jsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-bpe89ulacl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-bpe89ulacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> &#123; createObservable &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./internals&#x27;</span>;<br>+<span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> annotations <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./annotations&#x27;</span><br>+<span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">MakeObservableSymbol</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./environment&#x27;</span>;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">observable</span>(<span class="hljs-params">target</span>) &#123;<br>    <span class="hljs-keyword">return</span> <span class="hljs-title function_">createObservable</span>(<span class="hljs-literal">null</span>, <span class="hljs-literal">null</span>, target)<br>&#125;<br>+observable.<span class="hljs-property">shallow</span> = annotations.<span class="hljs-property">shallow</span><br>+observable[<span class="hljs-title class_">MakeObservableSymbol</span>] = annotations.<span class="hljs-property">observable</span><br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-6-8-annotations-index-jsx"><a href="#2-6-8-annotations-index-jsx" class="headerlink" title="2.6.8 annotations\index.jsx"></a>2.6.8 annotations\index.jsx</h4><p>src\@formily\reactive\annotations\index.jsx</p>
<figure class="highlight routeros"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-7i3pjylacl5vp0"></i><span>routeros</span><div class="collapse show" id="collapse-7i3pjylacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs routeros"><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./observable&#x27;</span><br><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./shallow&#x27;</span><br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-6-9-observable-jsx"><a href="#2-6-9-observable-jsx" class="headerlink" title="2.6.9 observable.jsx"></a>2.6.9 observable.jsx</h4><p>src\@formily\reactive\annotations\observable.jsx</p>
<figure class="highlight processing"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-pbst62lacl5vp0"></i><span>processing</span><div class="collapse show" id="collapse-pbst62lacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><code class="hljs processing"><span class="hljs-keyword">import</span> &#123; createAnnotation, createObservable &#125; from <span class="hljs-string">&#x27;../internals&#x27;</span><br><span class="hljs-keyword">import</span> &#123; bindTargetKeyWithCurrentReaction, runReactionsFromTargetKey &#125; from <span class="hljs-string">&#x27;../reaction&#x27;</span>;<br>export <span class="hljs-keyword">const</span> observable = <span class="hljs-title function_">createAnnotation</span>(<br>    (&#123; target, <span class="hljs-built_in">key</span>, value &#125;) =&gt; &#123;<br>        <span class="hljs-keyword">const</span> store = &#123;<br>            value: <span class="hljs-title function_">createObservable</span>(target, <span class="hljs-built_in">key</span>, target[<span class="hljs-built_in">key</span>]),<br>        &#125;<br>        function <span class="hljs-built_in">get</span>() &#123;<br>            <span class="hljs-title function_">bindTargetKeyWithCurrentReaction</span>(&#123; target, <span class="hljs-built_in">key</span> &#125;)<br>            <span class="hljs-keyword">return</span> store.<span class="hljs-property">value</span><br>        &#125;<br>        function <span class="hljs-built_in">set</span>(value) &#123;<br>            value = <span class="hljs-title function_">createObservable</span>(target, <span class="hljs-built_in">key</span>, value)<br>            store.<span class="hljs-property">value</span> = value<br>            <span class="hljs-title function_">runReactionsFromTargetKey</span>(&#123; target, <span class="hljs-built_in">key</span> &#125;)<br>        &#125;<br>        <span class="hljs-built_in">Object</span>.<span class="hljs-property">defineProperty</span>(target, <span class="hljs-built_in">key</span>, &#123;<br>            <span class="hljs-built_in">set</span>,<br>            <span class="hljs-built_in">get</span>,<br>            enumerable: <span class="hljs-literal">true</span>,<br>            configurable: <span class="hljs-literal">false</span><br>        &#125;)<br>        <span class="hljs-keyword">return</span> store.<span class="hljs-property">value</span><br>    &#125;<br>)<br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-6-10-shallow-jsx"><a href="#2-6-10-shallow-jsx" class="headerlink" title="2.6.10 shallow.jsx"></a>2.6.10 shallow.jsx</h4><p>src\@formily\reactive\annotations\shallow.jsx</p>
<figure class="highlight processing"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-i6mah4lacl5vp0"></i><span>processing</span><div class="collapse show" id="collapse-i6mah4lacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><code class="hljs processing"><span class="hljs-keyword">import</span> &#123; createAnnotation, createObservable &#125; from <span class="hljs-string">&#x27;../internals&#x27;</span><br><span class="hljs-keyword">import</span> &#123; bindTargetKeyWithCurrentReaction, runReactionsFromTargetKey &#125; from <span class="hljs-string">&#x27;../reaction&#x27;</span>;<br>export <span class="hljs-keyword">const</span> shallow = <span class="hljs-title function_">createAnnotation</span>(<br>    (&#123; target, <span class="hljs-built_in">key</span>, value &#125;) =&gt; &#123;<br>        <span class="hljs-keyword">const</span> store = &#123;<br>            value: <span class="hljs-title function_">createObservable</span>(target, <span class="hljs-built_in">key</span>, target[<span class="hljs-built_in">key</span>], <span class="hljs-literal">true</span>),<br>        &#125;<br>        function <span class="hljs-built_in">get</span>() &#123;<br>            <span class="hljs-title function_">bindTargetKeyWithCurrentReaction</span>(&#123; target: target, <span class="hljs-built_in">key</span>: <span class="hljs-built_in">key</span> &#125;)<br>            <span class="hljs-keyword">return</span> store.<span class="hljs-property">value</span><br>        &#125;<br><br>        function <span class="hljs-built_in">set</span>(value) &#123;<br>            value = <span class="hljs-title function_">createObservable</span>(target, <span class="hljs-built_in">key</span>, target[<span class="hljs-built_in">key</span>], <span class="hljs-literal">true</span>)<br>            store.<span class="hljs-property">value</span> = value<br>            <span class="hljs-title function_">runReactionsFromTargetKey</span>(&#123; target, <span class="hljs-built_in">key</span> &#125;)<br>        &#125;<br>        <span class="hljs-keyword">if</span> (target) &#123;<br>            <span class="hljs-built_in">Object</span>.<span class="hljs-property">defineProperty</span>(target, <span class="hljs-built_in">key</span>, &#123;<br>                <span class="hljs-built_in">set</span>,<br>                <span class="hljs-built_in">get</span>,<br>                enumerable: <span class="hljs-literal">true</span>,<br>                configurable: <span class="hljs-literal">false</span><br>            &#125;)<br>            <span class="hljs-keyword">return</span> target<br>        &#125;<br>        <span class="hljs-keyword">return</span> store.<span class="hljs-property">value</span><br>    &#125;<br>)<br><br></code></pre></td></tr></table></div></figure>

<h3 id="2-7-实现Tracker"><a href="#2-7-实现Tracker" class="headerlink" title="2.7 实现Tracker"></a>2.7 实现Tracker</h3><h4 id="2-7-1-src-main-jsx"><a href="#2-7-1-src-main-jsx" class="headerlink" title="2.7.1 src\main.jsx"></a>2.7.1 src\main.jsx</h4><p>src\main.jsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-ov5ndplacl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-ov5ndplacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> &#123; observable, <span class="hljs-title class_">Tracker</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@/@formily/reactive&#x27;</span><br><span class="hljs-keyword">const</span> values = &#123; <span class="hljs-attr">username</span>: <span class="hljs-string">&#x27;zhufeng&#x27;</span>, <span class="hljs-attr">home</span>: &#123; <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;beijing&#x27;</span> &#125; &#125;<br>+<span class="hljs-keyword">const</span> observableValues = <span class="hljs-title function_">observable</span>(values)<br>+<span class="hljs-keyword">const</span> tracker = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Tracker</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>+    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;forceUpate&#x27;</span>);<br>+&#125;)<br>+tracker.<span class="hljs-title function_">track</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>+    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(observableValues.<span class="hljs-property">username</span>);<br>+&#125;)<br>+observableValues.<span class="hljs-property">username</span> = <span class="hljs-string">&#x27;jiagou&#x27;</span>;<br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-7-2-tracker-jsx"><a href="#2-7-2-tracker-jsx" class="headerlink" title="2.7.2 tracker.jsx"></a>2.7.2 tracker.jsx</h4><p>src\@formily\reactive\tracker.jsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-kgofqzlacl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-kgofqzlacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">ReactionStack</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./environment&#x27;</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">Tracker</span> &#123;<br>    <span class="hljs-title function_">constructor</span>(<span class="hljs-params">scheduler</span>) &#123;<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-property">track</span>.<span class="hljs-property">scheduler</span> = scheduler;<br>    &#125;<br>    track = <span class="hljs-function">(<span class="hljs-params">view</span>) =&gt;</span> &#123;<br>        <span class="hljs-title class_">ReactionStack</span>.<span class="hljs-title function_">push</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">track</span>)<br>        <span class="hljs-keyword">return</span> <span class="hljs-title function_">view</span>();<br>    &#125;<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-7-3-reactive-index-jsx"><a href="#2-7-3-reactive-index-jsx" class="headerlink" title="2.7.3 reactive\index.jsx"></a>2.7.3 reactive\index.jsx</h4><p>src\@formily\reactive\index.jsx</p>
<figure class="highlight routeros"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-cxw73xlacl5vp0"></i><span>routeros</span><div class="collapse show" id="collapse-cxw73xlacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs routeros"><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./observable&#x27;</span><br><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./autorun&#x27;</span><br><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./model&#x27;</span><br>+<span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tracker&#x27;</span><br><br></code></pre></td></tr></table></div></figure>

<h4 id="2-7-4-reaction-jsx"><a href="#2-7-4-reaction-jsx" class="headerlink" title="2.7.4 reaction.jsx"></a>2.7.4 reaction.jsx</h4><p>src\@formily\reactive\reaction.jsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-hei9ixlacl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-hei9ixlacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">ReactionStack</span>, <span class="hljs-title class_">RawReactionsMap</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./environment&#x27;</span>;<br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 把某个对象的某个key和当前的reaction进行绑定</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> &#123;<span class="hljs-type">*</span>&#125; operation &#123;target,key&#125;</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title function_">bindTargetKeyWithCurrentReaction</span> = (<span class="hljs-params">operation</span>) =&gt; &#123;<br>    <span class="hljs-keyword">const</span> &#123; target, key &#125; = operation;<br>    <span class="hljs-comment">//最后一个Reaction就是currentReaction</span><br>    <span class="hljs-keyword">const</span> currentReaction = <span class="hljs-title class_">ReactionStack</span>[<span class="hljs-title class_">ReactionStack</span>.<span class="hljs-property">length</span> - <span class="hljs-number">1</span>];<br>    <span class="hljs-keyword">if</span> (currentReaction) &#123;<br>        <span class="hljs-title function_">addRawReactionsMap</span>(target, key, currentReaction)<br>    &#125;<br>&#125;<br><span class="hljs-keyword">const</span> <span class="hljs-title function_">addRawReactionsMap</span> = (<span class="hljs-params">target, key, reaction</span>) =&gt; &#123;<br>    <span class="hljs-comment">//判断此target对象在RawReactionsMap里有没有值</span><br>    <span class="hljs-keyword">const</span> reactionsMap = <span class="hljs-title class_">RawReactionsMap</span>.<span class="hljs-title function_">get</span>(target);<br>    <span class="hljs-keyword">if</span> (reactionsMap) &#123;<br>        <span class="hljs-keyword">const</span> reactionSet = reactionsMap.<span class="hljs-title function_">get</span>(key);<br>        <span class="hljs-keyword">if</span> (reactionSet) &#123;<br>            reactionSet.<span class="hljs-title function_">add</span>(reaction);<br>        &#125; <span class="hljs-keyword">else</span> &#123;<br>            <span class="hljs-keyword">let</span> reactionSet = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Set</span>();<br>            reactionSet.<span class="hljs-title function_">add</span>(reaction);<br>            reactionsMap.<span class="hljs-title function_">set</span>(key, reactionSet);<br>        &#125;<br>        <span class="hljs-keyword">return</span> reactionsMap;<br>    &#125; <span class="hljs-keyword">else</span> &#123;<br>        <span class="hljs-comment">//ArraySet 元素唯1的数组</span><br>        <span class="hljs-keyword">let</span> reactionSet = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Set</span>();<span class="hljs-comment">//源码里作者自己封装了一个ArraySet</span><br>        reactionSet.<span class="hljs-title function_">add</span>(reaction);<br>        <span class="hljs-keyword">const</span> reactionsMap = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Map</span>([[key, reactionSet]]);<br>        <span class="hljs-title class_">RawReactionsMap</span>.<span class="hljs-title function_">set</span>(target, reactionsMap);<br>        <span class="hljs-keyword">return</span> reactionsMap;<br>    &#125;<br>&#125;<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title function_">runReactionsFromTargetKey</span> = (<span class="hljs-params">operation</span>) =&gt; &#123;<br>    <span class="hljs-keyword">const</span> &#123; target, key &#125; = operation;<br>    <span class="hljs-title function_">runReactions</span>(target, key);<br>&#125;<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">runReactions</span>(<span class="hljs-params">target, key</span>) &#123;<br>    <span class="hljs-keyword">const</span> reactions = <span class="hljs-title function_">getReactionsFromTargetKey</span>(target, key);<br>    <span class="hljs-keyword">if</span>(reactions)&#123;<br>      <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> reaction <span class="hljs-keyword">of</span> reactions) &#123;<br>        <span class="hljs-keyword">if</span> (<span class="hljs-title function_">isFn</span>(reaction.<span class="hljs-property">scheduler</span>)) &#123;<br>           reaction.<span class="hljs-title function_">scheduler</span>(reaction)<br>        &#125; <span class="hljs-keyword">else</span> &#123;<br>           <span class="hljs-title function_">reaction</span>()<br>        &#125;<br>      &#125;<br>    &#125;<br>&#125;<br><span class="hljs-keyword">const</span> <span class="hljs-title function_">getReactionsFromTargetKey</span> = (<span class="hljs-params">target, key</span>) =&gt; &#123;<br>    <span class="hljs-keyword">const</span> reactionsMap = <span class="hljs-title class_">RawReactionsMap</span>.<span class="hljs-title function_">get</span>(target);<br>    <span class="hljs-keyword">if</span> (reactionsMap) &#123;<br>        <span class="hljs-keyword">return</span> reactionsMap.<span class="hljs-title function_">get</span>(key)<br>    &#125;<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h2 id="3-formily-reactive-react"><a href="#3-formily-reactive-react" class="headerlink" title="3. @formily/reactive-react "></a>3. @formily/reactive-react </h2><ul>
<li>  <a target="_blank" rel="noopener" href="https://reactive.formilyjs.org/zh-CN/api/react/observer">observer</a>接收一个 <code>Function RenderProps</code>，只要在 <code>Function</code> 内部消费到的任何响应式数据，都会随数据变化而自动重新渲染，也更容易实现局部精确渲染 -在 React 中， <a target="_blank" rel="noopener" href="https://reactive.formilyjs.org/zh-CN/api/react/observer#observer-1">observer</a>将 Function Component 变成 Reaction，每次视图重新渲染就会收集依赖，依赖更新会自动重渲染</li>
</ul>
<h3 id="3-1-src-main-tsx"><a href="#3-1-src-main-tsx" class="headerlink" title="3.1 src\main.tsx"></a>3.1 src\main.tsx</h3><p>src\main.tsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-wet5wslacl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-wet5wslacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span><br><span class="hljs-keyword">import</span> &#123; createRoot &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react-dom/client&#x27;</span><br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Counter</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Counter&#x27;</span>;<br><span class="hljs-title function_">createRoot</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;root&#x27;</span>)).<span class="hljs-title function_">render</span>(<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Counter</span> /&gt;</span></span>);<br><br></code></pre></td></tr></table></div></figure>

<h3 id="3-2-src-Counter-jsx"><a href="#3-2-src-Counter-jsx" class="headerlink" title="3.2 src\Counter.jsx"></a>3.2 src\Counter.jsx</h3><p>src\Counter.jsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-8hv5m9lacl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-8hv5m9lacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> &#123; observable &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@formily/reactive&#x27;</span><br><span class="hljs-keyword">import</span> &#123; observer &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@formily/reactive-react&#x27;</span><br><span class="hljs-keyword">const</span> counter = <span class="hljs-title function_">observable</span>(&#123;<br>    <span class="hljs-attr">number</span>: <span class="hljs-number">1</span><br>&#125;);<br><span class="hljs-keyword">const</span> <span class="hljs-title class_">Counter</span> = <span class="hljs-title function_">observer</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>    <span class="hljs-keyword">return</span> (<br>        <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml">            <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>&#123;counter.number&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span><br><span class="language-xml">            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">&#123;()</span> =&gt;</span> counter.number++&#125;&gt;+<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br>    )<br>&#125;);<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Counter</span>;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="3-3-reactive-react-index-tsx"><a href="#3-3-reactive-react-index-tsx" class="headerlink" title="3.3 reactive-react\index.tsx"></a>3.3 reactive-react\index.tsx</h3><p>src\@formily\reactive-react\index.tsx</p>
<figure class="highlight routeros"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-4bxkvvlacl5vp0"></i><span>routeros</span><div class="collapse show" id="collapse-4bxkvvlacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs routeros"><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./observer&#x27;</span><br><br></code></pre></td></tr></table></div></figure>

<h3 id="3-4-observer-jsx"><a href="#3-4-observer-jsx" class="headerlink" title="3.4 observer.jsx"></a>3.4 observer.jsx</h3><p>src\@formily\reactive-react\observer.jsx</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-qtozwklacl5vp0"></i><span>coffeescript</span><div class="collapse show" id="collapse-qtozwklacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">import</span> &#123; useObserver &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./hooks/useObserver&#x27;</span><br><span class="hljs-keyword">export</span> function observer(component) &#123;<br>    const wrappedComponent = <span class="hljs-function"><span class="hljs-params">(props)</span> =&gt;</span> &#123;<br>        <span class="hljs-keyword">return</span> useObserver(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> component(props))<br>    &#125;<br>    <span class="hljs-keyword">return</span> wrappedComponent;<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="3-5-useObserver-jsx"><a href="#3-5-useObserver-jsx" class="headerlink" title="3.5 useObserver.jsx"></a>3.5 useObserver.jsx</h3><p>src\@formily\reactive-react\hooks\useObserver.jsx</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-ps79zwlacl5vp0"></i><span>coffeescript</span><div class="collapse show" id="collapse-ps79zwlacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">import</span> &#123; useState, useCallback, useRef &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123; Tracker &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@/@formily/reactive&#x27;</span><br><span class="hljs-keyword">export</span> const useObserver = <span class="hljs-function"><span class="hljs-params">(view)</span> =&gt;</span> &#123;<br>    const [, setState] = useState([])<br>    const forceUpdate = useCallback(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> setState([]), [])<br>    const instRef = useRef(<span class="hljs-literal">null</span>)<br>    <span class="hljs-keyword">if</span> (!instRef.current) &#123;<br>        instRef.current = <span class="hljs-keyword">new</span> Tracker(forceUpdate)<br>    &#125;<br>    <span class="hljs-keyword">return</span> instRef.current.track(view)<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h2 id="4-formily-core"><a href="#4-formily-core" class="headerlink" title="4. @formily/core "></a>4. @formily/core </h2><ul>
<li>  <a target="_blank" rel="noopener" href="https://core.formilyjs.org/">@formily/core</a>的核心意义是将领域模型从UI框架中抽离出来</li>
<li>  Formily内核其实是一个 <code>@formily/reactive</code> 领域模型</li>
<li>  实际消费领域模型则主要是依赖<code>@formily/reactive</code>的响应器机制做依赖追踪来消费</li>
<li>  我们可以在响应器<code>Reactions</code>中消费 <code>Form/Field/ArrayField/ObjectField/VoidField</code>模型中的任意属性，依赖的属性发生变化，响应器就会重复执行</li>
</ul>
<p><img src="https://static.zhufengpeixun.com/formilycore_1659691651275.svg" srcset="https://ikkiss.oss-cn-hangzhou.aliyuncs.com/images/myblog/loading.gif" lazyload></p>
<h3 id="4-1-src-main-jsx"><a href="#4-1-src-main-jsx" class="headerlink" title="4.1 src\main.jsx"></a>4.1 src\main.jsx</h3><p>src\main.jsx</p>
<figure class="highlight php"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-t5pnr0lacl5vp0"></i><span>php</span><div class="collapse show" id="collapse-t5pnr0lacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs php">import &#123; createForm &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@/@formily/core&#x27;</span><br><span class="hljs-keyword">const</span> <span class="hljs-variable constant_">form</span> = <span class="hljs-title function_ invoke__">createForm</span>(&#123;<br>    <span class="hljs-attr">values</span>: &#123;<br>        <span class="hljs-attr">username</span>: <span class="hljs-string">&#x27;zhufeng&#x27;</span><br>    &#125;,<br>&#125;)<br>console.<span class="hljs-title function_ invoke__">log</span>(form);<br><span class="hljs-keyword">const</span> <span class="hljs-variable constant_">field</span> = form.<span class="hljs-title function_ invoke__">createField</span>(&#123; <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;username&#x27;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;用户名&#x27;</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;zhufeng&#x27;</span> &#125;);<br>console.<span class="hljs-title function_ invoke__">log</span>(field);<br><br></code></pre></td></tr></table></div></figure>

<h3 id="4-2-core-index-jsx"><a href="#4-2-core-index-jsx" class="headerlink" title="4.2 core\index.jsx"></a>4.2 core\index.jsx</h3><p>src\@formily\core\index.jsx</p>
<figure class="highlight routeros"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-m35ih6lacl5vp0"></i><span>routeros</span><div class="collapse show" id="collapse-m35ih6lacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs routeros"><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./shared/externals&#x27;</span>;<br><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./models&#x27;</span>;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="4-3-externals-jsx"><a href="#4-3-externals-jsx" class="headerlink" title="4.3 externals.jsx"></a>4.3 externals.jsx</h3><p>src\@formily\core\shared\externals.jsx</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-xcx4d9lacl5vp0"></i><span>coffeescript</span><div class="collapse show" id="collapse-xcx4d9lacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">import</span> &#123; FormPath &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@/@formily/shared&#x27;</span><br><span class="hljs-keyword">import</span> &#123; Form &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../models&#x27;</span><br><br>const createForm = <span class="hljs-function"><span class="hljs-params">(options)</span> =&gt;</span> &#123;<br>    <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Form(options)<br>&#125;<br><br><span class="hljs-keyword">export</span> &#123;<br>    FormPath,<br>    createForm<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="4-4-models-index-jsx"><a href="#4-4-models-index-jsx" class="headerlink" title="4.4 models\index.jsx"></a>4.4 models\index.jsx</h3><p>src\@formily\core\models\index.jsx</p>
<figure class="highlight routeros"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-he1tbolacl5vp0"></i><span>routeros</span><div class="collapse show" id="collapse-he1tbolacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs routeros"><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Form&#x27;</span><br><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Field&#x27;</span><br><br></code></pre></td></tr></table></div></figure>

<h3 id="4-5-Form-jsx"><a href="#4-5-Form-jsx" class="headerlink" title="4.5 Form.jsx"></a>4.5 Form.jsx</h3><p>src\@formily\core\models\Form.jsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-ym1r26lacl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-ym1r26lacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> &#123; define, observable &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@/@formily/reactive&#x27;</span><br><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">Field</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Field&#x27;</span><br><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">FormPath</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@/@formily/shared&#x27;</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">Form</span> &#123;<br>    values=&#123;&#125;<br>    fields = &#123;&#125;<br>    <span class="hljs-title function_">constructor</span>(<span class="hljs-params">props</span>) &#123;<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">initialize</span>(props)<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">makeObservable</span>()<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">makeValues</span>()<br>    &#125;<br>    <span class="hljs-title function_">initialize</span>(<span class="hljs-params">props</span>) &#123;<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span> = &#123; ...props &#125;<br>    &#125;<br>    <span class="hljs-title function_">makeObservable</span>(<span class="hljs-params"></span>) &#123;<br>        <span class="hljs-title function_">define</span>(<span class="hljs-variable language_">this</span>, &#123;<br>            <span class="hljs-attr">values</span>: observable,<br>            <span class="hljs-attr">fields</span>: observable.<span class="hljs-property">shallow</span><br>        &#125;)<br>    &#125;<br>    <span class="hljs-title function_">makeValues</span>(<span class="hljs-params"></span>) &#123;<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-property">values</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>.<span class="hljs-property">values</span><br>    &#125;<br>    <span class="hljs-title function_">createField</span>(<span class="hljs-params">props</span>) &#123;<br>        <span class="hljs-keyword">const</span> address = <span class="hljs-title class_">FormPath</span>.<span class="hljs-title function_">parse</span>().<span class="hljs-title function_">concat</span>(props.<span class="hljs-property">name</span>)<br>        <span class="hljs-keyword">new</span> <span class="hljs-title class_">Field</span>(address, props, <span class="hljs-variable language_">this</span>)<br>        <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">fields</span>[address.<span class="hljs-property">entire</span>]<br>    &#125;<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="4-6-Field-jsx"><a href="#4-6-Field-jsx" class="headerlink" title="4.6 Field.jsx"></a>4.6 Field.jsx</h3><p>src\@formily\core\models\Field.jsx</p>
<figure class="highlight kotlin"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-cbgvsulacl5vp0"></i><span>kotlin</span><div class="collapse show" id="collapse-cbgvsulacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs kotlin"><span class="hljs-keyword">import</span> &#123; define, observable &#125; from <span class="hljs-string">&#x27;@/@formily/reactive&#x27;</span><br>export <span class="hljs-keyword">class</span> <span class="hljs-title class_">Field</span> &#123;<br>    <span class="hljs-keyword">constructor</span>(address, props, form) &#123;<br>        <span class="hljs-keyword">this</span>.props = &#123; ...props &#125;;<br>        <span class="hljs-keyword">this</span>.form = form;<br>        <span class="hljs-keyword">this</span>.locate(address)<br>        <span class="hljs-keyword">this</span>.initialize()<br>        <span class="hljs-keyword">this</span>.makeObservable()<br>    &#125;<br>    initialize() &#123;<br>        <span class="hljs-keyword">this</span>.value = <span class="hljs-keyword">this</span>.props.value;<br>    &#125;<br>    makeObservable() &#123;<br>        define(<span class="hljs-keyword">this</span>, &#123;<br>            value: observable<br>        &#125;)<br>    &#125;<br>    locate(address) &#123;<br>        <span class="hljs-keyword">this</span>.form.fields[address.entire] = <span class="hljs-keyword">this</span><br>    &#125;<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="4-7-path-index-jsx"><a href="#4-7-path-index-jsx" class="headerlink" title="4.7 path\index.jsx"></a>4.7 path\index.jsx</h3><p>src\@formily\path\index.jsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-tjpvyilacl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-tjpvyilacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> <span class="hljs-title function_">parse</span> = (<span class="hljs-params">pattern</span>) =&gt; &#123;<br>    <span class="hljs-keyword">if</span> (!pattern) &#123;<br>        <span class="hljs-keyword">return</span> &#123;<br>            <span class="hljs-attr">entire</span>: <span class="hljs-string">&#x27;&#x27;</span>,<br>            <span class="hljs-attr">segments</span>: []<br>        &#125;<br>    &#125;<br>    <span class="hljs-keyword">return</span> &#123;<br>        <span class="hljs-attr">entire</span>: pattern,<br>        <span class="hljs-attr">segments</span>: pattern.<span class="hljs-title function_">split</span>(<span class="hljs-string">&#x27;.&#x27;</span>)<br>    &#125;<br>&#125;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">Path</span> &#123;<br>    <span class="hljs-title function_">constructor</span>(<span class="hljs-params">input = <span class="hljs-string">&#x27;&#x27;</span></span>) &#123;<br>        <span class="hljs-keyword">const</span> &#123; segments, entire &#125; = <span class="hljs-title function_">parse</span>(input)<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-property">entire</span> = entire<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-property">segments</span> = segments<br>    &#125;<br>    <span class="hljs-keyword">static</span> <span class="hljs-title function_">parse</span>(<span class="hljs-params"></span>) &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Path</span>();<br>    &#125;<br>    concat = <span class="hljs-function">(<span class="hljs-params">...args</span>) =&gt;</span> &#123;<br>        <span class="hljs-keyword">const</span> path = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Path</span>(<span class="hljs-string">&#x27;&#x27;</span>)<br>        path.<span class="hljs-property">segments</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">segments</span>.<span class="hljs-title function_">concat</span>(...args)<br>        path.<span class="hljs-property">entire</span> = path.<span class="hljs-property">segments</span>.<span class="hljs-title function_">join</span>(<span class="hljs-string">&#x27;.&#x27;</span>)<br>        <span class="hljs-keyword">return</span> path<br>    &#125;<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="4-8-shared-index-jsx"><a href="#4-8-shared-index-jsx" class="headerlink" title="4.8 shared\index.jsx"></a>4.8 shared\index.jsx</h3><p>src\@formily\shared\index.jsx</p>
<figure class="highlight routeros"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-2xcvpulacl5vp0"></i><span>routeros</span><div class="collapse show" id="collapse-2xcvpulacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs routeros"><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./path&#x27;</span><br><br></code></pre></td></tr></table></div></figure>

<h3 id="4-9-path-jsx"><a href="#4-9-path-jsx" class="headerlink" title="4.9 path.jsx"></a>4.9 path.jsx</h3><p>src\@formily\shared\path.jsx</p>
<figure class="highlight clean"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-xk9dzblacl5vp0"></i><span>clean</span><div class="collapse show" id="collapse-xk9dzblacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs clean"><span class="hljs-keyword">import</span> &#123; Path <span class="hljs-keyword">as</span> FormPath &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@/@formily/path&#x27;</span><br><span class="hljs-keyword">export</span> &#123; FormPath &#125;<br><br></code></pre></td></tr></table></div></figure>

<h2 id="5-formily-antd"><a href="#5-formily-antd" class="headerlink" title="5.@formily/antd "></a>5.@formily/antd </h2><h3 id="5-1-src-main-jsx"><a href="#5-1-src-main-jsx" class="headerlink" title="5.1 src\main.jsx"></a>5.1 src\main.jsx</h3><p>src\main.jsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-x3ib2placl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-x3ib2placl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;react&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">ReactDOM</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;react-dom/client&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; createForm &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@/@formily/core&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">FormProvider</span>, <span class="hljs-title class_">Field</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@/@formily/react&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">FormItem</span>, <span class="hljs-title class_">Input</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@/@formily/antd&quot;</span>;<br><span class="hljs-keyword">const</span> form = <span class="hljs-title function_">createForm</span>();<br><span class="hljs-keyword">const</span> <span class="hljs-title function_">App</span> = (<span class="hljs-params"></span>) =&gt; &#123;<br>    <span class="hljs-keyword">return</span> (<br>        <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">FormProvider</span> <span class="hljs-attr">form</span>=<span class="hljs-string">&#123;form&#125;</span>&gt;</span></span><br><span class="language-xml">            <span class="hljs-tag">&lt;<span class="hljs-name">Field</span></span></span><br><span class="hljs-tag"><span class="language-xml">                <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;username&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">                <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;用户名&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">                <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;jiagou&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">                <span class="hljs-attr">decorator</span>=<span class="hljs-string">&#123;[FormItem]&#125;</span></span></span><br><span class="hljs-tag"><span class="language-xml">                <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;[Input]&#125;</span></span></span><br><span class="hljs-tag"><span class="language-xml">            /&gt;</span></span><br><span class="language-xml">            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">&#123;()</span> =&gt;</span> &#123;</span><br><span class="language-xml">                form.submit(console.log)</span><br><span class="language-xml">            &#125;&#125;&gt;提交<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">FormProvider</span>&gt;</span></span><br>    )<br>&#125;;<br><span class="hljs-keyword">const</span> root = <span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">createRoot</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;root&quot;</span>));<br>root.<span class="hljs-title function_">render</span>(<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">App</span> /&gt;</span></span>);<br><br></code></pre></td></tr></table></div></figure>

<h3 id="5-2-Form-jsx"><a href="#5-2-Form-jsx" class="headerlink" title="5.2 Form.jsx"></a>5.2 Form.jsx</h3><p>src\@formily\core\models\Form.jsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-37voeelacl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-37voeelacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> &#123; define, observable &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@/@formily/reactive&#x27;</span><br><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">Field</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Field&#x27;</span><br><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">FormPath</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@/@formily/shared&#x27;</span><br>+<span class="hljs-keyword">import</span> &#123; batchSubmit &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../shared/internals&#x27;</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">Form</span> &#123;<br>    values = &#123;&#125;<br>    fields = &#123;&#125;<br>    <span class="hljs-title function_">constructor</span>(<span class="hljs-params">props</span>) &#123;<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">initialize</span>(props)<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">makeObservable</span>()<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">makeValues</span>()<br>    &#125;<br>    <span class="hljs-title function_">initialize</span>(<span class="hljs-params">props</span>) &#123;<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span> = &#123; ...props &#125;<br>    &#125;<br>    <span class="hljs-title function_">makeObservable</span>(<span class="hljs-params"></span>) &#123;<br>        <span class="hljs-title function_">define</span>(<span class="hljs-variable language_">this</span>, &#123;<br>            <span class="hljs-attr">values</span>: observable,<br>            <span class="hljs-attr">fields</span>: observable.<span class="hljs-property">shallow</span><br>        &#125;)<br>    &#125;<br>    <span class="hljs-title function_">makeValues</span>(<span class="hljs-params"></span>) &#123;<br>+       <span class="hljs-variable language_">this</span>.<span class="hljs-property">values</span> = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">assign</span>(&#123;&#125;, <span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>.<span class="hljs-property">values</span>);<br>    &#125;<br>    <span class="hljs-title function_">createField</span>(<span class="hljs-params">props</span>) &#123;<br>        <span class="hljs-keyword">const</span> address = <span class="hljs-title class_">FormPath</span>.<span class="hljs-title function_">parse</span>().<span class="hljs-title function_">concat</span>(props.<span class="hljs-property">name</span>)<br>        <span class="hljs-keyword">new</span> <span class="hljs-title class_">Field</span>(address, props, <span class="hljs-variable language_">this</span>)<br>        <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">fields</span>[address.<span class="hljs-property">entire</span>]<br>    &#125;<br>+   setValuesIn = <span class="hljs-function">(<span class="hljs-params">pattern, value</span>) =&gt;</span> &#123;<br>+       <span class="hljs-variable language_">this</span>.<span class="hljs-property">values</span>[pattern.<span class="hljs-property">entire</span>] = value;<br>+   &#125;<br>+   getValuesIn = <span class="hljs-function">(<span class="hljs-params">pattern</span>) =&gt;</span> &#123;<br>+       <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">values</span>[pattern.<span class="hljs-property">entire</span>];<br>+   &#125;<br>+   submit = <span class="hljs-function">(<span class="hljs-params">onSubmit</span>) =&gt;</span> &#123;<br>+       <span class="hljs-keyword">return</span> <span class="hljs-title function_">batchSubmit</span>(<span class="hljs-variable language_">this</span>, onSubmit)<br>+   &#125;<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="5-3-Field-jsx"><a href="#5-3-Field-jsx" class="headerlink" title="5.3 Field.jsx"></a>5.3 Field.jsx</h3><p>src\@formily\core\models\Field.jsx</p>
<figure class="highlight kotlin"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-tc8nz0lacl5vp0"></i><span>kotlin</span><div class="collapse show" id="collapse-tc8nz0lacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><code class="hljs kotlin"><span class="hljs-keyword">import</span> &#123; define, observable &#125; from <span class="hljs-string">&#x27;@/@formily/reactive&#x27;</span><br>export <span class="hljs-keyword">class</span> <span class="hljs-title class_">Field</span> &#123;<br>    <span class="hljs-keyword">constructor</span>(address, props, form) &#123;<br>        <span class="hljs-keyword">this</span>.props = &#123; ...props &#125;;<br>        <span class="hljs-keyword">this</span>.form = form;<br>        <span class="hljs-keyword">this</span>.locate(address)<br>        <span class="hljs-keyword">this</span>.initialize()<br>        <span class="hljs-keyword">this</span>.makeObservable()<br>    &#125;<br>    initialize() &#123;<br>        <span class="hljs-keyword">this</span>.value = <span class="hljs-keyword">this</span>.props.value;<br>+       <span class="hljs-keyword">this</span>.decorator = <span class="hljs-keyword">this</span>.props.decorator<br>+       <span class="hljs-keyword">this</span>.component = <span class="hljs-keyword">this</span>.props.component<br>    &#125;<br>    makeObservable() &#123;<br>        define(<span class="hljs-keyword">this</span>, &#123;<br>            value: observable<br>        &#125;)<br>    &#125;<br>    locate(address) &#123;<br>        <span class="hljs-keyword">this</span>.form.fields[address.entire] = <span class="hljs-keyword">this</span><br>+       <span class="hljs-keyword">this</span>.path = address;<br>    &#125;<br>+   <span class="hljs-keyword">get</span> value() &#123;<br>+       <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.form.getValuesIn(<span class="hljs-keyword">this</span>.path)<br>+   &#125;<br>+   <span class="hljs-keyword">set</span> value(value) &#123;<br>+       <span class="hljs-keyword">this</span>.form.setValuesIn(<span class="hljs-keyword">this</span>.path, value)<br>+   &#125;<br>+   <span class="hljs-keyword">get</span> decorator() &#123;<br>+       <span class="hljs-keyword">return</span> [<span class="hljs-keyword">this</span>.decoratorType]<br>+   &#125;<br>+   <span class="hljs-keyword">set</span> decorator(value) &#123;<br>+       <span class="hljs-keyword">this</span>.decoratorType = value[<span class="hljs-number">0</span>]<br>+   &#125;<br>+   <span class="hljs-keyword">get</span> component() &#123;<br>+       <span class="hljs-keyword">return</span> [<span class="hljs-keyword">this</span>.componentType]<br>+   &#125;<br>+   <span class="hljs-keyword">set</span> component(value) &#123;<br>+       <span class="hljs-keyword">this</span>.componentType = value[<span class="hljs-number">0</span>]<br>+   &#125;<br>+   onInput = (e) =&gt; &#123;<br>+       <span class="hljs-keyword">const</span> newValue = e.target.value;<br>+       <span class="hljs-keyword">this</span>.value = newValue;<br>+       <span class="hljs-keyword">this</span>.form.values[<span class="hljs-keyword">this</span>.props.name] = newValue;<br>+   &#125;;<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="5-4-externals-jsx"><a href="#5-4-externals-jsx" class="headerlink" title="5.4 externals.jsx"></a>5.4 externals.jsx</h3><p>src\@formily\reactive\externals.jsx</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-hksjimlacl5vp0"></i><span>coffeescript</span><div class="collapse show" id="collapse-hksjimlacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">import</span> &#123; ProxyRaw, MakeObservableSymbol &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./environment&#x27;</span><br>+<span class="hljs-keyword">import</span> &#123; isPlainObj &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./checkers&#x27;</span>;<br><span class="hljs-keyword">export</span> const isObservable = <span class="hljs-function"><span class="hljs-params">(target)</span> =&gt;</span> &#123;<br>    <span class="hljs-keyword">return</span> ProxyRaw.has(target)<br>&#125;<br><span class="hljs-keyword">export</span> const isAnnotation = <span class="hljs-function"><span class="hljs-params">(target)</span> =&gt;</span> &#123;<br>    <span class="hljs-keyword">return</span> target &amp;&amp; target[MakeObservableSymbol]<br>&#125;<br>+<span class="hljs-keyword">export</span> const toJS = <span class="hljs-function"><span class="hljs-params">(values)</span> =&gt;</span> &#123;<br>+    const visited = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Set</span>()<br>+    const _toJS = <span class="hljs-function"><span class="hljs-params">(values)</span> =&gt;</span> &#123;<br>+        <span class="hljs-keyword">if</span> (visited.has(values)) &#123;<br>+            <span class="hljs-keyword">return</span> values<br>+        &#125;<br>+        <span class="hljs-keyword">if</span> (isPlainObj(values)) &#123;<br>+            visited.add(values)<br>+            const res = &#123;&#125;<br>+            <span class="hljs-keyword">for</span> (const key <span class="hljs-keyword">in</span> values) &#123;<br>+                res[key] = _toJS(values[key])<br>+            &#125;<br>+            <span class="hljs-keyword">return</span> res<br>+        &#125;<br>+        <span class="hljs-keyword">return</span> values<br>+    &#125;<br>+    <span class="hljs-keyword">return</span> _toJS(values)<br>+&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="5-5-reactive-index-jsx"><a href="#5-5-reactive-index-jsx" class="headerlink" title="5.5 reactive\index.jsx"></a>5.5 reactive\index.jsx</h3><p>src\@formily\reactive\index.jsx</p>
<figure class="highlight routeros"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-qk9kewlacl5vp0"></i><span>routeros</span><div class="collapse show" id="collapse-qk9kewlacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs routeros"><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./observable&#x27;</span><br><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./autorun&#x27;</span><br><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./model&#x27;</span><br><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tracker&#x27;</span><br>+<span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./externals&#x27;</span><br><br></code></pre></td></tr></table></div></figure>

<h3 id="5-6-internals-jsx"><a href="#5-6-internals-jsx" class="headerlink" title="5.6 internals.jsx"></a>5.6 internals.jsx</h3><p>src\@formily\core\shared\internals.jsx</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-m40pmylacl5vp0"></i><span>coffeescript</span><div class="collapse show" id="collapse-m40pmylacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">import</span> &#123; toJS &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@/@formily/reactive&#x27;</span><br><span class="hljs-keyword">export</span> const batchSubmit = <span class="hljs-function"><span class="hljs-params">(target, onSubmit)</span> =&gt;</span> &#123;<br>    onSubmit(toJS(target.values))<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="5-7-antd-index-jsx"><a href="#5-7-antd-index-jsx" class="headerlink" title="5.7 antd\index.jsx"></a>5.7 antd\index.jsx</h3><p>src\@formily\antd\index.jsx</p>
<figure class="highlight routeros"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-mrwfdelacl5vp0"></i><span>routeros</span><div class="collapse show" id="collapse-mrwfdelacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs routeros"><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./form-item&#x27;</span><br><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./input&#x27;</span><br><br></code></pre></td></tr></table></div></figure>

<h3 id="5-8-form-item-index-jsx"><a href="#5-8-form-item-index-jsx" class="headerlink" title="5.8 form-item\index.jsx"></a>5.8 form-item\index.jsx</h3><p>src\@formily\antd\form-item\index.jsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-t5gs0vlacl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-t5gs0vlacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> &#123; connect, mapProps &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@/@formily/react&#x27;</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title function_">BaseItem</span> = (<span class="hljs-params">&#123; children, label &#125;</span>) =&gt; &#123;<br>    <span class="hljs-keyword">return</span> (<br>        <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml">            <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>&#123;label&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span><br><span class="language-xml">            &#123;children&#125;</span><br><span class="language-xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br>    )<br>&#125;<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title class_">FormItem</span> = <span class="hljs-title function_">connect</span>(<br>    <span class="hljs-title class_">BaseItem</span>,<br>    <span class="hljs-title function_">mapProps</span>(<span class="hljs-function">(<span class="hljs-params">props, field</span>) =&gt;</span> &#123;<br>        <span class="hljs-keyword">return</span> &#123; <span class="hljs-attr">label</span>: field.<span class="hljs-property">props</span>.<span class="hljs-property">title</span> &#125;<br>    &#125;)<br>)<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">FormItem</span><br><br></code></pre></td></tr></table></div></figure>

<h3 id="5-9-input-index-jsx"><a href="#5-9-input-index-jsx" class="headerlink" title="5.9 input\index.jsx"></a>5.9 input\index.jsx</h3><p>src\@formily\antd\input\index.jsx</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-o8fro3lacl5vp0"></i><span>coffeescript</span><div class="collapse show" id="collapse-o8fro3lacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">import</span> &#123; connect, mapProps &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@/@formily/react&#x27;</span><br><span class="hljs-keyword">import</span> &#123; Input <span class="hljs-keyword">as</span> AntdInput &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;antd&#x27;</span><br><span class="hljs-keyword">export</span> const Input = connect(<br>    AntdInput,<br>    mapProps(<span class="hljs-function"><span class="hljs-params">(props)</span> =&gt;</span> &#123;<br>        <span class="hljs-keyword">return</span> &#123; ...props &#125;<br>    &#125;)<br>)<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Input<br><br></code></pre></td></tr></table></div></figure>

<h3 id="5-10-react-index-jsx"><a href="#5-10-react-index-jsx" class="headerlink" title="5.10 react\index.jsx"></a>5.10 react\index.jsx</h3><p>src\@formily\react\index.jsx</p>
<figure class="highlight routeros"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-07qxrulacl5vp0"></i><span>routeros</span><div class="collapse show" id="collapse-07qxrulacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs routeros"><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components&#x27;</span><br><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./hooks&#x27;</span><br><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./shared&#x27;</span><br><br></code></pre></td></tr></table></div></figure>

<h3 id="5-11-Field-jsx"><a href="#5-11-Field-jsx" class="headerlink" title="5.11 Field.jsx"></a>5.11 Field.jsx</h3><p>src\@formily\react\components\Field.jsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-f879vglacl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-f879vglacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span><br><span class="hljs-keyword">import</span> &#123; useForm &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../hooks&#x27;</span><br><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">ReactiveField</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./ReactiveField&#x27;</span><br><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">FieldContext</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../shared&#x27;</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title function_">Field</span> = (<span class="hljs-params">props</span>) =&gt; &#123;<br>  <span class="hljs-keyword">const</span> form = <span class="hljs-title function_">useForm</span>()<br>  <span class="hljs-keyword">const</span> field = form.<span class="hljs-title function_">createField</span>(props)<br>  <span class="hljs-keyword">return</span> (<br>    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">FieldContext.Provider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&#123;field&#125;</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">ReactiveField</span> <span class="hljs-attr">field</span>=<span class="hljs-string">&#123;field&#125;</span>&gt;</span>&#123;props.children&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">ReactiveField</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">FieldContext.Provider</span>&gt;</span></span><br>  )<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="5-12-FormProvider-jsx"><a href="#5-12-FormProvider-jsx" class="headerlink" title="5.12 FormProvider.jsx"></a>5.12 FormProvider.jsx</h3><p>src\@formily\react\components\FormProvider.jsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-xpo6cylacl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-xpo6cylacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span><br><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">FormContext</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../shared&#x27;</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title function_">FormProvider</span> = (<span class="hljs-params">props</span>) =&gt; &#123;<br>  <span class="hljs-keyword">const</span> form = props.<span class="hljs-property">form</span><br>  <span class="hljs-keyword">return</span> (<br>    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">FormContext.Provider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&#123;form&#125;</span>&gt;</span>&#123;props.children&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">FormContext.Provider</span>&gt;</span></span><br>  )<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="5-13-components-index-jsx"><a href="#5-13-components-index-jsx" class="headerlink" title="5.13 components\index.jsx"></a>5.13 components\index.jsx</h3><p>src\@formily\react\components\index.jsx</p>
<figure class="highlight routeros"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-9behthlacl5vp0"></i><span>routeros</span><div class="collapse show" id="collapse-9behthlacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs routeros"><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./FormProvider&#x27;</span><br><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Field&#x27;</span><br><br></code></pre></td></tr></table></div></figure>

<h3 id="5-14-ReactiveField-jsx"><a href="#5-14-ReactiveField-jsx" class="headerlink" title="5.14 ReactiveField.jsx"></a>5.14 ReactiveField.jsx</h3><p>src\@formily\react\components\ReactiveField.jsx</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-dp97rklacl5vp0"></i><span>coffeescript</span><div class="collapse show" id="collapse-dp97rklacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123; observer &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@/@formily/reactive-react&#x27;</span><br>const ReactiveInternal = <span class="hljs-function"><span class="hljs-params">(props)</span> =&gt;</span> &#123;<br>    const field = props.field<br>    const renderDecorator = <span class="hljs-function"><span class="hljs-params">(children)</span> =&gt;</span> &#123;<br>        <span class="hljs-keyword">return</span> React.createElement(<br>            field.decoratorType,<br>            &#123;&#125;,<br>            children<br>        )<br>    &#125;<br>    const renderComponent = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> &#123;<br>        const value = field.value;<br>        const onChange = <span class="hljs-function"><span class="hljs-params">(...args)</span> =&gt;</span> &#123;<br>            field.onInput(...args)<br>        &#125;<br>        <span class="hljs-keyword">return</span> React.createElement(<br>            field.componentType,<br>            &#123;<br>                value,<br>                onChange<br>            &#125;<br>        )<br>    &#125;<br>    <span class="hljs-keyword">return</span> renderDecorator(renderComponent())<br>&#125;<br><span class="hljs-keyword">export</span> const ReactiveField = observer(ReactiveInternal)<br><br></code></pre></td></tr></table></div></figure>

<h3 id="5-15-hooks-index-jsx"><a href="#5-15-hooks-index-jsx" class="headerlink" title="5.15 hooks\index.jsx"></a>5.15 hooks\index.jsx</h3><p>src\@formily\react\hooks\index.jsx</p>
<figure class="highlight routeros"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-fiziqwlacl5vp0"></i><span>routeros</span><div class="collapse show" id="collapse-fiziqwlacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs routeros"><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./useForm&#x27;</span><br><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./useField&#x27;</span><br><br></code></pre></td></tr></table></div></figure>

<h3 id="5-16-useField-jsx"><a href="#5-16-useField-jsx" class="headerlink" title="5.16 useField.jsx"></a>5.16 useField.jsx</h3><p>src\@formily\react\hooks\useField.jsx</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-xvycublacl5vp0"></i><span>coffeescript</span><div class="collapse show" id="collapse-xvycublacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">import</span> &#123; useContext &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span><br><span class="hljs-keyword">import</span> &#123; FieldContext &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../shared&#x27;</span><br><br><span class="hljs-keyword">export</span> const useField = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> &#123;<br>    <span class="hljs-keyword">return</span> useContext(FieldContext)<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="5-17-useForm-jsx"><a href="#5-17-useForm-jsx" class="headerlink" title="5.17 useForm.jsx"></a>5.17 useForm.jsx</h3><p>src\@formily\react\hooks\useForm.jsx</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-yjm844lacl5vp0"></i><span>coffeescript</span><div class="collapse show" id="collapse-yjm844lacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">import</span> &#123; useContext &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span><br><span class="hljs-keyword">import</span> &#123; FormContext &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../shared&#x27;</span><br><br><span class="hljs-keyword">export</span> const useForm = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> &#123;<br>  <span class="hljs-keyword">return</span> useContext(FormContext)<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="5-18-connect-jsx"><a href="#5-18-connect-jsx" class="headerlink" title="5.18 connect.jsx"></a>5.18 connect.jsx</h3><p>src\@formily\react\shared\connect.jsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-mvnca4lacl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-mvnca4lacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123; observer &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@/@formily/reactive-react&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123; useField &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../hooks&#x27;</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">mapProps</span>(<span class="hljs-params">...args</span>) &#123;<br>    <span class="hljs-keyword">return</span> <span class="hljs-function">(<span class="hljs-params">target</span>) =&gt;</span> &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-title function_">observer</span>(<br>            <span class="hljs-function">(<span class="hljs-params">props</span>) =&gt;</span> &#123;<br>                <span class="hljs-keyword">const</span> field = <span class="hljs-title function_">useField</span>()<br>                <span class="hljs-keyword">const</span> results = args.<span class="hljs-title function_">reduce</span>(<br>                    <span class="hljs-function">(<span class="hljs-params">props, mapper</span>) =&gt;</span> &#123;<br>                        <span class="hljs-keyword">return</span> <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">assign</span>(props, <span class="hljs-title function_">mapper</span>(props, field))<br>                    &#125;,<br>                    &#123; ...props &#125;<br>                )<br>                <span class="hljs-keyword">return</span> <span class="hljs-title class_">React</span>.<span class="hljs-title function_">createElement</span>(target, results)<br>            &#125;<br>        )<br>    &#125;<br>&#125;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">connect</span>(<span class="hljs-params">target, ...args</span>) &#123;<br>    <span class="hljs-keyword">const</span> <span class="hljs-title class_">Target</span> = args.<span class="hljs-title function_">reduce</span>(<span class="hljs-function">(<span class="hljs-params">target, mapper</span>) =&gt;</span> &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-title function_">mapper</span>(target)<br>    &#125;, target)<br>    <span class="hljs-keyword">return</span> <span class="hljs-function">(<span class="hljs-params">props</span>) =&gt;</span> &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-title class_">React</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-title class_">Target</span>, &#123; ...props &#125;)<br>    &#125;<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="5-19-context-jsx"><a href="#5-19-context-jsx" class="headerlink" title="5.19 context.jsx"></a>5.19 context.jsx</h3><p>src\@formily\react\shared\context.jsx</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-kyx4n1lacl5vp0"></i><span>javascript</span><div class="collapse show" id="collapse-kyx4n1lacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> &#123; createContext &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title class_">FormContext</span> = <span class="hljs-title function_">createContext</span>(<span class="hljs-literal">null</span>)<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title class_">FieldContext</span> = <span class="hljs-title function_">createContext</span>(<span class="hljs-literal">null</span>)<br><br></code></pre></td></tr></table></div></figure>

<h3 id="5-20-shared-index-jsx"><a href="#5-20-shared-index-jsx" class="headerlink" title="5.20 shared\index.jsx"></a>5.20 shared\index.jsx</h3><p>src\@formily\react\shared\index.jsx</p>
<figure class="highlight routeros"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-oqxvtzlacl5vp0"></i><span>routeros</span><div class="collapse show" id="collapse-oqxvtzlacl5vp0"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs routeros"><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./context&#x27;</span><br><span class="hljs-built_in">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./connect&#x27;</span><br><br></code></pre></td></tr></table></div></figure>

<h2 id="6-字段验证"><a href="#6-字段验证" class="headerlink" title="6.字段验证 "></a>6.字段验证 </h2>
                
              </div>
            
            <hr/>
            <div>
              <div class="post-metas my-3">
  
    <div class="post-meta mr-3 d-flex align-items-center">
      <i class="iconfont icon-category"></i>
      

<span class="category-chains">
  
  
    
      <span class="category-chain">
        
  <a href="/categories/%E7%BB%84%E4%BB%B6%E5%BA%93/" class="category-chain-item">组件库</a>
  
  
    <span>></span>
    
  <a href="/categories/%E7%BB%84%E4%BB%B6%E5%BA%93/formily/" class="category-chain-item">formily</a>
  
  

  

      </span>
    
  
</span>

    </div>
  
  
    <div class="post-meta">
      <i class="iconfont icon-tags"></i>
      
        <a href="/tags/%E7%BB%84%E4%BB%B6%E5%BA%93/">#组件库</a>
      
        <a href="/tags/formily/">#formily</a>
      
    </div>
  
</div>


              
  

  <div class="license-box my-3">
    <div class="license-title">
      <div>formily简版源码</div>
      <div>http://81.68.132.127/2022/11/11/formily/formily简版源码/</div>
    </div>
    <div class="license-meta">
      
        <div class="license-meta-item">
          <div>作者</div>
          <div>Ikki</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>发布于</div>
          <div>2022年11月11日</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>更新于</div>
          <div>2022年11月11日</div>
        </div>
      
      
        <div class="license-meta-item">
          <div>许可协议</div>
          <div>
            
              
              
                <a target="_blank" href="https://creativecommons.org/licenses/by/4.0/">
                  <span class="hint--top hint--rounded" aria-label="BY - 署名">
                    <i class="iconfont icon-by"></i>
                  </span>
                </a>
              
            
          </div>
        </div>
      
    </div>
    <div class="license-icon iconfont"></div>
  </div>



              
                <div class="post-prevnext my-3">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2022/11/11/FrontEndEngineering/%E7%BB%84%E4%BB%B6%E5%BA%93%E6%90%AD%E5%BB%BA/" title="antd组件库搭建">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">antd组件库搭建</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2022/11/11/formily/umi4+formily/" title="umi4+formily">
                        <span class="hidden-mobile">umi4+formily</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
  <article id="comments" lazyload>
    
  <div id="valine"></div>
  <script type="text/javascript">
    Fluid.utils.loadComments('#valine', function() {
      Fluid.utils.createScript('https://lib.baomitu.com/valine/1.5.1/Valine.min.js', function() {
        var options = Object.assign(
          {"appId":"6KzYWc2oaEBaHgNl4UIicMJC-gzGzoHsz","appKey":"vJ4FIwKeHRmHraCJraAsjyZ7","path":"window.location.pathname","placeholder":"请输入你的评论\n昵称为必填项目(输入QQ号码可以自动获取昵称和邮箱)\n虽然email不是必选，但是填写了email可以收到推送通知哦！","avatar":"retro","meta":["nick","mail","link"],"requiredFields":[],"pageSize":10,"lang":"zh-CN","highlight":true,"recordIP":true,"serverURLs":"","emojiCDN":null,"emojiMaps":null,"enableQQ":true},
          {
            el: "#valine",
            path: window.location.pathname
          }
        )
        new Valine(options);
        Fluid.utils.waitElementVisible('#valine .vcontent', () => {
          var imgSelector = '#valine .vcontent img:not(.vemoji)';
          Fluid.plugins.imageCaption(imgSelector);
          Fluid.plugins.fancyBox(imgSelector);
        })
      });
    });
  </script>
  <noscript>Please enable JavaScript to view the comments</noscript>


  </article>


          </article>
        </div>
      </div>
    </div>

    <div class="side-col d-none d-lg-block col-lg-2">
      

    </div>
  </div>
</div>





  



  



  



  



  







    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v" for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>

    

    
  </main>

  <footer>
    <div class="footer-inner">
  
    <div class="footer-content">
      IKKI-专业BUG开发
    </div>
  
  
    <div class="statistics">
  
  

  
    
      <span id="busuanzi_container_site_pv" style="display: none">
        总访问量 
        <span id="busuanzi_value_site_pv"></span>
         次
      </span>
    
    
      <span id="busuanzi_container_site_uv" style="display: none">
        总访客数 
        <span id="busuanzi_value_site_uv"></span>
         人
      </span>
    
    
  
</div>

  
  
  
</div>

  </footer>

  <!-- Scripts -->
  
  <script  src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" ></script>
<script  src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>


  <script  src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var subtitle = document.getElementById('subtitle');
      if (!subtitle || !typing) {
        return;
      }
      var text = subtitle.getAttribute('data-typed-text');
      
        typing(text);
      
    })(window, document);
  </script>




  
    <script  src="/js/img-lazyload.js" ></script>
  




  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/tocbot/4.18.2/tocbot.min.js', function() {
    var toc = jQuery('#toc');
    if (toc.length === 0 || !window.tocbot) { return; }
    var boardCtn = jQuery('#board-ctn');
    var boardTop = boardCtn.offset().top;

    window.tocbot.init(Object.assign({
      tocSelector     : '#toc-body',
      contentSelector : '.markdown-body',
      linkClass       : 'tocbot-link',
      activeLinkClass : 'tocbot-active-link',
      listClass       : 'tocbot-list',
      isCollapsedClass: 'tocbot-is-collapsed',
      collapsibleClass: 'tocbot-is-collapsible',
      scrollSmooth    : true,
      includeTitleTags: true,
      headingsOffset  : -boardTop,
    }, CONFIG.toc));
    if (toc.find('.toc-list-item').length > 0) {
      toc.css('visibility', 'visible');
    }

    Fluid.events.registerRefreshCallback(function() {
      if ('tocbot' in window) {
        tocbot.refresh();
        var toc = jQuery('#toc');
        if (toc.length === 0 || !tocbot) {
          return;
        }
        if (toc.find('.toc-list-item').length > 0) {
          toc.css('visibility', 'visible');
        }
      }
    });
  });
</script>


  <script src=https://lib.baomitu.com/clipboard.js/2.0.11/clipboard.min.js></script>

  <script>Fluid.plugins.codeWidget();</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/anchor-js/4.3.1/anchor.min.js', function() {
    window.anchors.options = {
      placement: CONFIG.anchorjs.placement,
      visible  : CONFIG.anchorjs.visible
    };
    if (CONFIG.anchorjs.icon) {
      window.anchors.options.icon = CONFIG.anchorjs.icon;
    }
    var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
    var res = [];
    for (var item of el) {
      res.push('.markdown-body > ' + item.trim());
    }
    if (CONFIG.anchorjs.placement === 'left') {
      window.anchors.options.class = 'anchorjs-link-left';
    }
    window.anchors.add(res.join(', '));

    Fluid.events.registerRefreshCallback(function() {
      if ('anchors' in window) {
        anchors.removeAll();
        var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
        var res = [];
        for (var item of el) {
          res.push('.markdown-body > ' + item.trim());
        }
        if (CONFIG.anchorjs.placement === 'left') {
          anchors.options.class = 'anchorjs-link-left';
        }
        anchors.add(res.join(', '));
      }
    });
  });
</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js', function() {
    Fluid.plugins.fancyBox();
  });
</script>


  <script>Fluid.plugins.imageCaption();</script>

  <script  src="/js/local-search.js" ></script>

  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  
<script src="/fluid/js/star.js"></script>



<!-- 主题的启动项，将它保持在最底部 -->
<!-- the boot of the theme, keep it at the bottom -->
<script  src="/js/boot.js" ></script>


  

  <noscript>
    <div class="noscript-warning">博客在允许 JavaScript 运行的环境下浏览效果更佳</div>
  </noscript>
</body>
</html>
